|
|
@ -200,73 +200,77 @@ |
|
|
|
.triangle-top() { |
|
|
|
.triangle-top() { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
width: 16px; |
|
|
|
width: 16px; |
|
|
|
height: 6px; |
|
|
|
height: 9px; |
|
|
|
//虽然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: 6px; |
|
|
|
width: 9px; |
|
|
|
height: 6px; |
|
|
|
height: 9px; |
|
|
|
margin-left: 4px; |
|
|
|
margin-left: 4px; |
|
|
|
margin-top: 2px; |
|
|
|
margin-top: 5px; |
|
|
|
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: 6px; |
|
|
|
height: 9px; |
|
|
|
//虽然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: 6px; |
|
|
|
width: 9px; |
|
|
|
height: 6px; |
|
|
|
height: 9px; |
|
|
|
margin-left: 4px; |
|
|
|
margin-left: 4px; |
|
|
|
margin-top: -3px; |
|
|
|
margin-top: -5px; |
|
|
|
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: 6px; |
|
|
|
width: 9px; |
|
|
|
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: 6px; |
|
|
|
width: 9px; |
|
|
|
height: 6px; |
|
|
|
height: 9px; |
|
|
|
margin-left: 2px; |
|
|
|
margin-left: 5px; |
|
|
|
margin-top: 3px; |
|
|
|
margin-top: 4px; |
|
|
|
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: 6px; |
|
|
|
width: 9px; |
|
|
|
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: 6px; |
|
|
|
width: 10px; |
|
|
|
height: 6px; |
|
|
|
height: 10px; |
|
|
|
margin-left: -3px; |
|
|
|
margin-left: -5px; |
|
|
|
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)); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|