css - 在 css3 中制作这个(梯形)形状的最佳方法

Question

我有这个带有伪元素的形状:

https://jsfiddle.net/6gf1m3j5/

body {
    margin: 0;
    background:#ccc;
}

#octagon-left {
    background: red none repeat scroll 0 0;
    height: 60px;
    width: 100%;
}
#octagon-left::before {
    border-left: 100px solid white;
    border-top: 60px solid red;
    content: "";
    height: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 40px;
}

#octagon-left::after {
    border-right: 100px solid white;
    border-top: 60px solid red;
    content: "";
    height: 0;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}

这里的问题是左右 Angular 的白色。

如果我这样做，border-left: 100px solid transparent;红色占主导地位。

我想要这样:

我该怎么做？

非常感谢您的支持，谢谢。

Answer 1

#octagon
{
  background-color: red;
  height: 60px;
  margin: 0 auto;
  position: relative;
  width: calc(100% - 120px);
}
#octagon:before,
#octagon:after
{
  background-color: red;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
#octagon:before
{
  transform: translateX(30px) skewX(-45deg);
}
#octagon:after
{
  transform: translateX(-30px) skewX(45deg);
}

<div id="octagon"></div>