html - 在html、css中制作硬图

Question

如何在 css 中将这个图形作为一个 div？不是 svg!

图在这里:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000">
  <path xmlns="http://www.w3.org/2000/svg" style="stroke:black;fill:khaki;stroke-width:1px;"  d="M140.874 308.014 141.874 158.014 234.926 157.015 234.874 106.014 287.926 105.014 287.874 54.0144 377.874 54.0144 379.374 182.014 548.874 182.014 548.874 309.014z" transform="matrix(1.05374 0 0 1 -4.94393 0)"/>
</svg>

Answer 1

您可以尝试对边框使用线性渐变和阴影滤镜:

.box {
  height:200px;
  width:300px;
  background:
  linear-gradient(khaki,khaki) 40% 100%/20% 84% no-repeat,
  linear-gradient(khaki,khaki) 20% 100%/20% 70% no-repeat,
  linear-gradient(khaki,khaki) 0 100%/50% 50% no-repeat,
  linear-gradient(khaki,khaki) 100% 100%/50% 40% no-repeat;
  filter:drop-shadow(0px 0px 2px #000);
}

<div class="box">

</div>

或者使用伪元素和边框的经典丑陋方式:

.box {
  margin-top: 100px;
  height: 100px;
  width: 300px;
  background: khaki;
  position: relative;
  border:1px solid;
}

.box:before,
.box:after {
  content: "";
  position: absolute;
}
.box:before {
   right:120px;
   bottom:100px;
   width:70px;
   height:70px;
   background:khaki;
   border-right:1px solid;
   border-top:1px solid;
   border-left:1px solid;
}
.box:after {
   right:191px;
   bottom:100px;
   width:60px;
   height:40px;
   background:khaki;
   border-top:1px solid;
   border-left:1px solid;
}
.box span{
   position:absolute;
   left:-1px;
   bottom:100px;
   width:49px;
   height:20px;
   background:khaki;
   border-top:1px solid;
   border-left:1px solid;
   z-index:2;
}

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