玩CSS形状：如何使用纯HTML和CSS制作自定义图标

目前，我正在玩HTML和CSS，我想从这张图片制作一个图标

图像有点像这样。我尝试在较大的圆内添加不同形状的椭圆形和圆形，但没有成功。对于阴影部分，我使用了框阴影来设置样式。我的示例图标中已经有太多div。我只想让它简单易读

以下是我的HTML结构：

<link rel="stylesheet" href="style.css">

<div class="cont">
    <div class="icon2">
        <div class="inner-circle"></div>
    </div>
</div>

---

你能给我解释一下吗？我怎样才能想出解决问题的办法？我被困了好几个小时，我只想尝试纯HTML和CSS，而不是使用photoshop。

你可以用一个元素和径向渐变轻松做到这一点。只需调整渐变内使用的百分比即可控制形状：

.box{
宽度：150px；
高度：150像素；
边界半径：50%；
边框：4px实心；
背景：
径向梯度（左上角的圆圈，透明59.4%，黑色60%钙（60%+4px），橙色钙（60%+5px））；
}

---

您也可以使用

框阴影

；）

---

box shadow

CSS属性在元素的帧周围添加阴影效果。可以设置多个以逗号分隔的效果。长方体阴影由相对于元素的X和Y偏移、模糊和扩展半径以及颜色来描述

---

演示您的图像：

div{
边框：实心6px；
显示：内联flex；
高度：200px；
宽度：200px；
边界半径：50%；
盒影：插图-50px-70px 1px-30px rgb（255、127、39），插图-56px-77px 1px-33px；
}
代码{
字体大小：30px；
颜色：绿色；
保证金：自动；
字体大小：粗体；
}
分区，
img{
垂直对齐：中间对齐；
}

box shadow

您可以使用伪元素并具有溢出：隐藏以隐藏位于div“外圈”之外的伪元素的其余部分

div{
高度：200px；
宽度：200px；
溢出：隐藏；
边框：5px纯黑；
背景：橙色；
边界半径：50%；
位置：相对位置；
}
部门：之后{
内容：“；
位置：绝对位置；
身高：100%；
宽度：200%；
边界：继承；
边界半径：50%；
背景：白色；
前-20%；
左-100%；
}

---

不过我还是找不到完美的形状。请帮帮我。CSS有一些不值得做的事情——这可能就是其中之一。你可能会接近SVG。在你的情况下，may me

Canvas

可以帮助你SVG更好你可以创建简单的SVG是的，我尝试过使用方框阴影，但maybre我更喜欢SVG。虽然学习起来可能很复杂。有很多数字！但我会尝试使用这个！不过还是要谢谢你！：）谢谢你的回答！因为我不太熟悉SVG，所以它更容易理解

.cont {
    width: 190px;
    height: 190px;
    padding: 20px;
 }
 .icon2 {
    position: relative;
    border: 2px solid #353332;
    width: 187px;
    height: 184px;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: inset 20px 35px #1CAEE3;
    transform: rotate(177deg);
  }
  .inner-circle {
    border: 7px solid #353332;
    width: 120px;
    height: 183px;
    background-color: #fff;
    border-radius: 50% 50% 50% 49% / 60% 52% 40% 40%;
    transform: rotate(240deg);
    display: block;
    margin: 6px 0px 4px 35px;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
   }