테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

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

참신한삼치 9개월 전 조회 1,503
답변 1
목록

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

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

다르게 만들수 있을까요? 

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

 

 

http://sir.kr/data/editor/2501/3554994364_1737348509.8124.png" width="615" />

#그누보드5 #css3 #html5
댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
세크티
세크티
9개월 전

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

 </p>

<pre>
<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></pre>

<pre>

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

<p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

s
sinbi
9개월 전
결과보기 https://codepen.io/sinbi/pen/NPKLWXx
�
참신한삼치
9개월 전
헉 감사합니당!!!
�
참신한삼치
9개월 전
너무 죄송하시만 하나만 더 여쭤봐도 될까요? ㅠㅠ 마우스오버시 전체 굵은 선 채우기를 하고싶은데 어떻게 줘야하는지 알수있을까요! 부탁드립니당 ㅠㅠㅠ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인