实现方法:
用空的内联块,宽度高度都设置成0,其中一边的边框设置成可见,其它三边边框设置成透明,再配合边框宽度,可见的边框就呈现成三角形。
模拟代码:
css部分:
.caret-left > span {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
margin-bottom: 0.1em;
border-right: 0.4em dashed;
border-top: 0.4em solid transparent;
border-bottom: 0.4em solid transparent;
}
.caret-left:before {
content:"";
}
.caret-right > span {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
margin-bottom: 0.1em;
border-left: 0.4em dashed;
border-top: 0.4em solid transparent;
border-bottom: 0.4em solid transparent;
}
.caret-right:before {
content:"";
}
.caret-up > span {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
margin-bottom: 0.1em;
border-bottom: 0.4em dashed;
border-left: 0.4em solid transparent;
border-right: 0.4em solid transparent;
}
.caret-up:before {
content:"";
}
.caret-down > span {
display: inline-block;
width: 0;
height: 0;
vertical-align: middle;
margin-bottom: 0.1em;
border-top: 0.4em dashed;
border-left: 0.4em solid transparent;
border-right: 0.4em solid transparent;
}
.caret-down:before {
content:"";
}
/* 辅助样式 */
button {
border-radius: 3px;
background-color: #FFF;
border: 1px solid;
line-height: 2em;
min-width: 2em;
}
html部分:
<button class="caret-left"><span></span></button>
<button class="caret-right"><span></span></button>
<button class="caret-up"><span></span></button>
<button class="caret-down"><span></span></button>
效果图:
补充:
用margin-bottom来调整底部偏移偶尔会出现底部的尖角被削掉一点儿,变成棱台形状,换成padding-bottom之后好了。