带有 div 框和边框的 Css 技巧

Question

我正在尝试制作一个如下所示的 div:

有没有办法只用 css 来做到这一点？

我一直在尝试在jsfiddle中发挥这个想法

.box {
  background-color : red;
  position : relative;
  display : block;
  height : 50px;
  width : 200px;
  text-align : center;
  margin : 0 auto;
}

.box p {
  padding : 0px;
}

.box::before {
  content: '';
  height: 50px;
  width: 10px;
  background-color: blue;
  position: absolute;
  top: 0;
  left: 0px;
  transform: skewX(-10deg);
  transform-origin: top;
  -webkit-transform: skewX(-10deg);
  -webkit-transform-origin: 0 0;
}

.box::after {
  content: '';
  height: 50px;
  width: 15px;
  background-color: green;
  position: absolute;
  top: 0;
  right: -15px;
  left: auto;
  transform: skewX(-15deg);
  transform-origin: top;
  -webkit-transform: skewX(-15deg);
  -webkit-transform-origin: 0 0;
}

好像左右都可以玩，就是不知道下面怎么玩

Answer 1

我知道一种方法，那就是使用 svg。 Here是一个在线 svg 编辑器

下面的代码生成与您所寻找的相似的形状。 Jsfiddle 是 here

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
    <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
    <g>
        <title>Layer 1</title>
        <line id="svg_2" y2="198" x2="509" y1="198" x1="59" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" />
        <line stroke="#000000" id="svg_3" y2="197" x2="60.999999" y1="320" x1="26" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" fill="none" />
        <line id="svg_4" y2="258" x2="497" y1="317" x1="28" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" />
        <line id="svg_6" y2="258" x2="495" y1="195" x1="507" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none" />
    </g>
</svg>