목록으로

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

참신한삼치

프로필 보기 이 회원 글보기 이 회원의 댓글보기

11개월 전 조회 1,881

답변 1

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

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

다르게 만들수 있을까요?

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

3554994364_1737348509.8124.png

#그누보드5 #css3 #html5

답변 1개

정렬:

채택된 답변

+20 포인트

세크티

프로필 보기 이 회원 글보기 이 회원의 댓글보기

11개월 전

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

Copy

 



    .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;
    }






TEXT

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