Question

我怎样才能将这个数字作为css中的一个div？不是svg！

图就在这里：

＆＃13;

<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>

＆＃13;

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

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

Answer 3

对于此表单中的make 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中不起作用。

用html，css做一个难以理解的数字

3 个答案: