前端html css实现三角形

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”>