div border属性css绘制向左三⾓形_纯css实现三⾓形
每天学习⼀个⼩技能
现在的⽹站上 ⼿机上我们经常见到⼀些下拉列表的下箭头 其实⽅式很简单 直接引⼊图⽚ 或者去字体⽂件 随着技术的发展 前端性能这⼀⽅⾯有很⼤的提升 再不能⽤图⽚ 或者尽量不适⽤图⽚的情况下 css 也可以绘制简单的图⽚ 下⾯就是三⾓形
⾸先这个思路的讲解 就是⽤到了 border 边框这个属性 ⼀个div 可以设置四边边框 我们先把其他三条边都去掉 只留下⼀个边框 其他 在设置底边框的宽度 再把内容区域设置为0 就可以了
下⾯是代码
div {
width:0;
height:0;
border-top:30px solid red ;
border-left:30px solid transparent;
border-right:30px solid transparent;
}
/*左侧三⾓形 */
div {
width:0;
height:0;
border-top:30px solid transparent;
border-left:30px solid red;
border-bottom:30px solid transparent;
}
/
右侧三⾓形/
div {
width:0;
height:0;
border-right:30px solid red;
border-bottom:30px solid transparent;
border-top:30px solid transparent;
}
/底部正三⾓形/
div {
width:0;
height:0;
border-bottom:30px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
}
<div></div>
我加的边框颜⾊是透明 transparent;
那个给transparent属性就说明他所在的位置要变成透明（隐藏起来），这时只会显⽰不透明的部分
有兴趣的⼩伙伴可以去试试

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。