使用两个具有不同::before
属性的伪元素border
(请参阅js小提琴)。尽管“你只能使用一个::before
和一个::after
伪元素”这个实际工作。为什么呢?
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;
}
答案 0 :(得分:6)
您似乎只有一个伪元素。
这就在UI中:
你的CSS级联到:
.el:before {
content: '';
display: inline-block;
width: 0;
height: 0;
border-top: 50px solid #e86d0a;
border-left: 50px solid transparent;
position: absolute;
border-bottom: 50px solid #e86d0a;
border-left: 50px solid transparent;
top: 0;
left: -50px;
}
查看Chrome处理组合CSS的方式:
答案 1 :(得分:3)
只有一个伪元素,但添加了属性,因为这两个规则适用于该伪元素。
你的CSS相当于
.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;
border-bottom: 50px solid #e86d0a;
border-left: 50px solid transparent;
top: 0;
left: -50px;
}
这与此案相似,可能更为明显:
a {
color: red;
}
a {
font-weight: bold;
}