반응형
.doughnut {
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
padding: 20px; // doughnut width
background:linear-gradient(45deg,#00dbde,#fc00ff);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
<div class="doughnut"></div>
반응형
'css > e.g.' 카테고리의 다른 글
[css] filter를 이용해 이미지를 white/black 실루엣 이미지로 변경 (0) | 2022.01.22 |
---|---|
[PC] Gradient Doughnut 2 / Loading (0) | 2021.09.25 |
[PC/MO] Pie Chart (0) | 2021.09.24 |
[css-real] 웹접근성을 고려한 .blind(hidden) 처리 (0) | 2021.01.20 |
[css-real] 드래그(drag) 막기 (4) | 2021.01.11 |
댓글