作者:不点包子 | 来源:互联网 | 2020-09-18 19:48
html:
css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}
把高宽设为0,其他边为透明颜色,三角形出来了:
html:
css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;//左箭头
}
在开发中,可以利用伪类,定位实现,不改变dom结构,简洁优雅。content提供给三角形的位置,这个属性不能少。
html:
文字文字
css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content:'';
}
现在追求平面化设计,还有另一种三角线箭头,更受欢迎。
设置两个伪类,前一个伪类覆盖至另一个了伪类,留出一些线出来就好:
html:
文字文字
CSS:
div {
position: relative;
}
.arrow:after,.arrow:before {
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: orange;
position: absolute;
content: "";
}
.arrow:before{
top: 0;
left: 70px;//根据实际情况调整
border-left-color: white;
}
may you like it.
感谢大家的阅读,希望大家收益多多。
本文转自:https://blog.csdn.net/qq_34250472/article/details/55513862
推荐教程:《CSS教程》
以上就是带你玩转css中各种方向小箭头的详细内容,更多请关注 第一PHP社区 其它相关文章!