HTML格式的SVG字形

Question

我需要用HTML绘制一些SVG字形。

是否可以使用CSS创建HTML，使其看起来像SVG？ 我的问题是箭头处的阴影。

Answer 1

您可以使用clip-path表示箭头（及其阴影）和带有box-shadow的伪元素作为带有重叠框的数字

  

Codepen example

<强>标记

<div class="arrow">Arrow</div>
<div class="boxes">Boxes</div>

<强>的CSS

.arrow {
  height: 55px;
  width: 250px;
  position: relative;
  line-height: 55px;
  padding: 0 35px;

}

.arrow::before, .arrow::after {
  content: "";
  display: block;
  height: inherit;
  width: inherit;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background: #666;
  clip-path: polygon(0 0, 25px 50%, 0% calc(100% - 5px), 85% calc(100% - 5px),  100% 50%, 85% 0);
}

.arrow::after {
  transform: translate(5px, 5px);
  opacity: .25; 
}



.boxes, .boxes::before, .boxes::after  {
  position: relative;
  background: #f2f2f2;
  height: 180px;
  width: 180px;
  border-color: #999;
  border-style: solid;
  border-width: 1px;
  border-top-width: 2px; 
  border-right-width: 2px; 
  box-shadow: 3px 4px 0 #ccc;
}

.boxes::before, .boxes::after {
  content: "";
  position: absolute;
  display: block;
}

.boxes::after { top: -12px; left: 4px;   z-index: -1; }
.boxes::before { top: -20px; left: 14px;  z-index: -2; }

其他两个数字可以用相同的方法获得（它们只是一个简单的尺寸和颜色变化）

<强>结果

Answer 2

这是形状之一：

body{
padding:20px;
}
div {
    position:relative;
    display: inline-block;
    background: red;
    position:relative;
    padding: 9px;
    padding-right: 22px;
}

div:before {
    content: "";
    border-style: solid;
    border-width: 17px 15px 17px 0px;
    border-color: transparent red transparent transparent;
    position: absolute;
    left: -15px;
    top: 1px;
}
div:after {
    content: "";
    border-style: solid;
    border-width: 17px 15px 17px 0px;
    border-color: transparent white transparent transparent;
    position: absolute;
    left: 93px;
    top: 0px;
}

<div class="triangle">Hello world </div>