@ -200,73 +200,77 @@
.triangle-top() {
.triangle-top() {
position: absolute;
position: absolute;
width: 16px;
width: 16px;
height: 6 px;
height: 9 px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
text-align: left;
&:before {
&:before {
position: absolute;
position: absolute;
width: 6 px;
width: 9 px;
height: 6 px;
height: 9 px;
margin-left: 4px;
margin-left: 4px;
margin-top: 2 px;
margin-top: 5 px;
content: "";
content: "";
transform: rotate(-135deg);
transform: rotate(-135deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.06));
}
}
}
}
.triangle-bottom() {
.triangle-bottom() {
position: absolute;
position: absolute;
width: 16px;
width: 16px;
height: 6 px;
height: 9 px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
text-align: left;
&:before {
&:before {
position: absolute;
position: absolute;
width: 6 px;
width: 9 px;
height: 6 px;
height: 9 px;
margin-left: 4px;
margin-left: 4px;
margin-top: -3 px;
margin-top: -5 px;
content: "";
content: "";
transform: rotate(45deg);
transform: rotate(45deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.07));
}
}
}
}
.triangle-left() {
.triangle-left() {
position: absolute;
position: absolute;
width: 6 px;
width: 9 px;
height: 16px;
height: 16px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
text-align: left;
&:before {
&:before {
position: absolute;
position: absolute;
width: 6 px;
width: 9 px;
height: 6 px;
height: 9 px;
margin-left: 2 px;
margin-left: 5 px;
margin-top: 3 px;
margin-top: 4 px;
content: "";
content: "";
transform: rotate(135deg);
transform: rotate(135deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.06));
}
}
}
}
.triangle-right() {
.triangle-right() {
position: absolute;
position: absolute;
width: 6 px;
width: 9 px;
height: 16px;
height: 16px;
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
//虽然position:absolute使得:before的display属性为block,但是其仍然受到祖先text-align:center的影响,这边重置掉
text-align: left;
text-align: left;
&:before {
&:before {
position: absolute;
position: absolute;
width: 6 px;
width: 10 px;
height: 6 px;
height: 10 px;
margin-left: -3 px;
margin-left: -5 px;
margin-top: 4px;
margin-top: 4px;
content: "";
content: "";
transform: rotate(-45deg);
transform: rotate(-45deg);
.box-shadow(3px 3px 10px 0, rgba(0, 0, 0, 0.07));
}
}
}
}