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

Question

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

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

这是我的 HTML 结构：

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

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

这是我的 CSS：

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

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

Answer 1

您可以使用一个元素和径向渐变轻松完成此操作。 只需调整渐变内部使用的百分比即可控制形状：

 .box { width:150px; height:150px; border-radius:50%; border:4px solid; background: radial-gradient(circle at top left,transparent 59.4%,black 60% calc(60% + 4px),orange calc(60% + 5px)); }

 <div class="box"></div>

Answer 2

您也可以使用box-shadow ;)

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

---

box-shadow CSS 属性在元素的框架周围添加阴影效果。 您可以设置以逗号分隔的多个效果。 盒子阴影由相对于元素的 X 和 Y 偏移量、模糊和散布半径以及颜色来描述。

---

演示您的图像：

 div { border: solid 6px; display: inline-flex; height: 200px; width: 200px; border-radius: 50%; box-shadow: inset -50px -70px 1px -30px rgb(255, 127, 39), inset -56px -77px 1px -33px; } code { font-size: 30px; color: green; margin: auto; font-weight: bold; } div, img { vertical-align: middle; }

 <img src="https://i.stack.imgur.com/HRpQY.png"> <div><code>box-shadow</code></div>

---

另一个例子：

 div { float:left; height: 180px; width: 180px; margin: 1em; box-sizing: border-box; padding: 25px; background: #F4E5D9; box-shadow: inset -40px -40px 3px -20px #C5824D, inset 40px 40px 3px -20px #EABD9A, inset 0 0 2px 30px #AD6026, inset 0 0 0px 32px #705642, inset 0 -55px 3px 10px #705B4B, inset 0 55px 3px 10px #705B4B, 0 0 3px 2px #705B4B, 0 0 3px 4px #665447, 0 0 3px 7px #3F332A, 0 0 3px 9px #705642, 88px 90px 1px -86px gray, 87px 85px 2px -82px #F2C232, 85px 95px 2px -82px #A30700, 92px 92px 2px -82px #C5824D, 88px 90px 10px -70px white; border-radius:50%; display:flex; flex-direction:column; justify-content:center;text-align:center; } div + div {border-radius:4em /50%;

 <div> <p>inset shadow </p> <p>border-radius </p> <p>decreased shadow </p> </div> <div> <p>inset shadow </p> <p>border-radius </p> <p>decreased shadow </p> </div>

你也可以画柑橘片https://codepen.io/gcyrillus/pen/wutEK 。

---

但是 SVG 在这里充其量是;)

Answer 3

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

 div { height: 200px; width: 200px; overflow: hidden; border: 5px solid black; background:orange; border-radius: 50%; position: relative; } div:after { content: ""; position: absolute; height: 100%; width: 200%; border: inherit; border-radius: 50%; background: white; top: -20%; left: -100%; }

 <div></div>