CSS：如何在图像周围制作一种颜色为60％的圆形，另一种颜色为40％的圆形？

Question

是否可以在图像周围制作一种颜色为60％的圆形，另一种颜色为40％的圆形。

我尝试使用以下代码，

//CSS
.waitlist .img-thumbnail {
    border: 2px solid #dee2e6;
    background: linear-gradient(90deg, #2A89F6 50%, transparent 50%),
                linear-gradient(-90deg, #CCC 50%, transparent 50%);
}

//HTML
<img src="images/1.jpg" alt="" class="img-fluid rounded-circle img-thumbnail mb-2" width="100">

以上代码的输出为

但是我希望输出为

是否可以实现所需的输出？

Answer 1

您可以这样做：

.box {
  border-radius:50%;
  display:inline-block;
  padding:5px;
  background:
   linear-gradient(-40deg, grey 50%,transparent 0), /*adjust the deg value here to control the %*/
   linear-gradient(to right, red 50%,transparent 0),
   grey;
}
.box img {
  border-radius:50%;
  display:block;
}

<div class="box">
<img src="https://picsum.photos/100/100?image=1069" >
</div>