玩转 CSS 形状：如何使用纯 HTML 和 CSS 制作自定义 ICON答案

【问题标题】：Playing with CSS shapes: How to make a custom ICON using pure HTML and CSS玩转 CSS 形状：如何使用纯 HTML 和 CSS 制作自定义 ICON
【发布时间】：2019-11-25 04:30:47
【问题描述】：

目前，我正在使用 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。

【问题讨论】：

我无法以某种方式找到完美的形状。请帮帮我。
有些事情不值得用 CSS 做——这可能就是其中之一。你可能会用 SVG 获得一些接近的东西。
在你的情况下，我 Canvas 可以帮助你
Svg 更好，您可以创建简单的 svg here

标签： html css css-shapes

【解决方案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));
}

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

感谢您的回答！因为我对 SVG 不太熟悉，所以它更容易理解。

【解决方案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 最好在这里 ;)

【讨论】：

是的，我尝试过使用盒子阴影，但也许我更喜欢 SVG。虽然学习起来可能很复杂。有很多数字！但我会尝试使用它！不过谢谢你！ :)

【解决方案3】：

您可以使用伪元素并设置一个溢出：隐藏来隐藏伪元素的其余部分，这些部分位于 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%;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：