bester Weg, um diese (Trapez) Form in css3 machen

Question

Ich habe diese Form mit Pseudo-Elementen:

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

Das Problem hier ist die weiße Farbe in der linken und rechten Ecke.

Wenn ich es tue, Rand links: 100px solide transparent; die Farbe Rot ist vorherrschend.

ich das gerne möchte:

Wie kann ich das tun?

Ich schätze wirklich Ihre Unterstützung, danke.

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>

Answer 2

Ändern Sie wie so codieren und mich

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>