html+ css 实现三角形, 箭头。
首先先介绍以下 border
border 官方定义 简写属性在一个声明设置所有的边框属性。
咱们首先知道 border 在浏览器上 是怎么绘制的。
当 被绘制的盒子width 有值的时候,围绕着盒子绘制。 也就是边框的宽度。
当 被绘制的盒子width 为 0的时候, border 是从 中心点开始绘制的
上代码:
.box{
width:0;
height:0;
border:100px solid;
/* 上红 右绿 下蓝 左棕色 */
border-color: red green blue saddlebrown;
}
上图:
现在盒子的高是 200px 上边框 (100px)+ 下边框 (100px)
盒子的宽是 200px 左边看(100px)+ 有边框(100px)
这样咱们的三角形 就可以 设置为
边框颜色,只让一个存在就可以了
比如 我们现在要一个 向右的三角形
.box{
width:0;
border:100px solid;
/* 上红 右绿 下蓝 左棕色 */
border-color: red green blue saddlebrown;
border-color:transparent transparent transparent red ;
}
制作 向右箭头 就可以通过 三角形 覆盖 三角形 实现。通过定位 留出来的就是 箭头了。
.box {
position: relative;
}
.box1{
width:0;
border:100px solid;
/* 上红 右绿 下蓝 左棕色 */
border-color: red green blue saddlebrown;
/* box-sizing: border-box; */
border-color:transparent transparent transparent red ;
position: absolute;
left: 20px;
}
.box2 {
width: 0;
border: 100px solid;
border-color:transparent transparent transparent #FFF ;
position: absolute;
left: 10px;
}
布局
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
class=“box”>