在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;
}

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

如果我这样做，边框左边：100px固体透明;红色很盛行。

我想要这样：

我该怎么做？

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

Answer 1

＆＃13;

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

更改您的代码并让我知道

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 #ccc;/*Change from white to #ccc*/
    border-top: 60px solid red;
    content: "";
    height: 0;
    margin: 0;
    position: absolute;
    top: 0;
    width: 40px;
}

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

<div id="octagon-left">

</div>