Utilizing two pseudo elements ::before with different border properties (refer to js fiddle), contrary to the rule that states "you can use only one ::before and one ::after pseudo element," this approach surprisingly worked. How is this possible?
https://jsfiddle.net/8L7zou3e/1/
<div class="el"></div>.el {
position: relative;
margin: 100px 0 0 500px;
width: 300px;
height: 100px;
background-color: #AA4343;
}
.el:before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 50px solid #e86d0a;
border-left: 50px solid transparent;
position: absolute;
top: 0;
left: -50px;
}
.el:before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-bottom: 50px solid #e86d0a;
border-left: 50px solid transparent;
position: absolute;
top: 0px;
left: -50px;
}