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

Question

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

图像有点像那样。我尝试在较大的圆圈内添加不同形状的椭圆和圆圈，但没有成功。对于阴影部分，我使用了一个盒子阴影来设计它的样式。我的示例图标中已经有太多的 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

The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

在图片旁边演示：

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

您可以使用伪元素并使用 overflow:hidden 来隐藏 div 的 'outer circle'[=12 之外的伪元素的其余部分=]

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>

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

Playing with CSS shapes: How to make a custom ICON using pure HTML and CSS

html

css

css-shapes