在html、css中做出努力

Question

我怎样才能把这个数字变成 div 中的一个 css ？不是 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>

Answer 2

对于这种形式的 div 你可以使用 'clip-path' 像这个例子：

.test{
  width: 1000px;
  height: 1000px;
  background: red;
  clip-path: polygon(140.874px 308.014px, 141.874px 158.014px, 234.926px 157.015px, 234.874px 106.014px, 287.926px 105.014px, 287.874px 54.0144px, 377.874px 54.0144px, 379.374px 182.014px, 548.874px 182.014px, 548.874px 309.014px);
}

<div class="test"></div>

但是这个CSS规则在IE和Edge中不起作用。

Answer 3

你可以用CSS clip-path 属性通过polygon函数实现这个形状。边框可以用所有 4 个方向的阴影模拟，应用于包装元素：

.shape {
  width: 200px;
  height: 100px;
  background: khaki;
  clip-path: polygon(0% 100%, 0% 40%, 20% 40%, 20% 15%, 40% 15%, 40% 0%, 60% 0%, 60% 50%, 100% 50%, 100% 100%);
}

.wrapper {
  filter: drop-shadow(1px 1px 0px black)
    drop-shadow(1px -1px 0px black)
    drop-shadow(-1px 1px 0px black)
    drop-shadow(-1px -1px 0px black);
}

<div class="wrapper">
  <div class="shape"></div>
</div>

在html、css中做出努力

Make an hard figure in html, css

html

css

svg

css-shapes