Css技巧与div框和边框

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>