html如何定义形状位置,HTML – 如何创建自定义形状 – CSS

我想创建一个像这个图像的自定义形状：

我能怎么做 ？

我的CSS：

#chevron {

position: relative;

text-align: center;

padding: 12px;

margin-bottom: 6px;

height: 60px;

width: 200px; }

#chevron:before {

content: '';

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 51%;

background: #337AB7;

-webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg);

-ms-transform: skew(0deg, 6deg);

-o-transform: skew(0deg, 6deg);

transform: skew(0deg, 6deg); }

#chevron:after {

content: '';

position: absolute;

top: 0;

right: 0;

height: 100%;

width: 50%;

background: #337AB7;

-webkit-transform: skew(0deg, -6deg); -moz-transform: skew(0deg, -6deg); -ms-transform: skew(0deg, -6deg); -o-transform: skew(0deg, -6deg); transform: skew(0deg, -6deg); }

我的HTML文件：

但我的结果不是我想要的：