CSS3 원형 테두리 부분 두께 조절 문의드립니다.
본문
안녕하세요 아래 첨부한 이미지 처럼
원형 박스 테두리가 부분적으로 두께를
다르게 만들수 있을까요?
어떻게 해야하는지 제발 알려주세요 부탁드립니당 ㅠㅠ
답변 1
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>
헉 감사합니당!!!
너무 죄송하시만 하나만 더 여쭤봐도 될까요? ㅠㅠ 마우스오버시 전체 굵은 선 채우기를 하고싶은데 어떻게 줘야하는지 알수있을까요! 부탁드립니당 ㅠㅠㅠ
답변을 작성하시기 전에 로그인 해주세요.
