在 css3 中制作此（梯形）形状的最佳方法

Question

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

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

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

如果我这样做，border-left: 100px solid transparent;红色很流行。

我想点赞：

我该怎么做？

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

Answer 1

像这样更改您的代码并告诉我

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>

Answer 2

#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>

在 css3 中制作此（梯形）形状的最佳方法

Best way to make this (trapezoid) shape in css3

css

shape

pseudo-element