CSS3 원형 테두리 부분 두께 조절 문의드립니다.

참신한삼치 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2025.01.20 13:50:16 1429 (211.♡.♡.188)

답변 1

본문

안녕하세요 아래 첨부한 이미지 처럼

원형 박스 테두리가 부분적으로 두께를

다르게 만들수 있을까요?

어떻게 해야하는지 제발 알려주세요 부탁드립니당 ㅠㅠ

3554994364_1737348509.8124.png

#그누보드5 #css3 #html5

답변 1

세크티 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2025-01-20 14:17:19 122.♡.♡.57

rotate(56deg) 부분 수정해서 굵은 원 위치 조정하시면됩니다.

 

<style>
    .circle-demo {
        width: 200px;
        height: 200px;
        border-radius: 50rem;
        border: 1px solid red;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .circle-demo:before {
        content: '';
        position: absolute;
        left: 50%;
        top: 50%;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        border-radius: 50rem;
        border: 5px solid red;
        clip-path: polygon(50% 0, 100% 0, 100% 50%, 50% 50%);
        transform: translate(-50%, -50%) rotate(56deg);
        transform-origin: center center;
    }

</style>



<div class="circle-demo" >
<p>TEXT</p>
</div>