如何仅在CSS中构建此图标？

Question

我喜欢使用CSS 构建此图标(使用Fontawesome).什么是CSS的最佳实践？谢谢!

Answer 1

这是一个粗略的设计,但向您展示如何单独使用css.

我也通过使用vw单位和%单位这样设计它也应该是可扩展的.

.circle {
  height: 20vw;
  width: 20vw;
  background: green;
  border: 10px solid lightgreen;
  border-radius: 50%;
  position: relative;
}
.square {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40%;
  width: 40%;
  box-sizing: border-box;
  border: 0.5vw solid white;
  border-radius: 5px;
}
.square:before,
.square:after {
  content: "";
  position: absolute;
  background: white;
}
.square:before {
  height: 20%;
  width: 40%;
  top: 50%;
  left: 20%;
  border-radius: 5px 0 5px 5px;
  transform: rotate(45deg);
  z-index: 10;
}
.square:after {
  height: 100%;
  width: 20%;
  top: -8%;
  left: 70%;
  border-radius: 10px 10px 10px 0;
  transform: rotate(45deg);
  border: 5px solid green;
  border-bottom: none;
}

<div class="circle">
  <div class="square"></div>
</div>

Answer 2

SVG

我只需要向您展示如何使用svg轻松完成此操作.
我发现svg是创建高级形状的最佳工具.

<svg wdth="250px" height="250px" viewBox="0 0 100 150">
  <rect x="0" y="0" width="100" height="150" fill="rgb(247,242,234)"></rect>
  <circle cx="50" cy="50" r="50" fill="rgba(125,189,84, 0.3)"></circle>
  <circle cx="50" cy="50" r="40" fill="rgb(125,189,84)"></circle>
  <rect x="30" y="30" rx="5" ry="5" width="40" height="40" stroke-width="5" stroke="white" fill="none"></rect>
  <polyline stroke="rgb(125,189,84)" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" fill="none" points="45,50 55,60 75,35"></polyline>
  <polyline stroke="white" stroke-width="7" stroke-linecap="round" stroke-linejoin="round" fill="none" points="45,50 55,60 75,35"></polyline>
  <text x="50" y="120" text-anchor="middle" style="font-family: fantasy;">Work Orders</text>
</svg>