CSS基础如何用border写三角形？

1.常用的border的单值属性（border指的是边框。）

/*边框样式属性*/
border-style: solid;
/*边框颜色*/
border-color: #06a43a;
/*边框宽度*/
border-width: 10px;

其中border-style的属性值有三种：
solid（实线），dashed（虚线为方块），dotted(虚线为圆点)
border-style的属性值-效果图

其中颜色，宽度，样式属性值有四个方向。根据值的不同，对应的方向不同
点击查看详情

border-width:
四个值：上（10px）右（20px） 下（30px） 左（40px）
border-width: 10px 20px 30px 40px;
三个值：上（10px）右（20px） 下（30px） 左（20px）
border-width: 10px 20px 30px ;
两个值：上（10px）右（20px） 下（10px） 左（20px）
border-width: 10px 20px ;
一个值：上下左右全是10px;
border-width: 10px;

2.用border边框写三角行

(1)首先查看边框特性，边框交替的位置是斜线
下面是代码，border边框为梯形，点击查看

注意：边框交替处为斜边，是个梯形，用此属性写三角形

（2）开始用边框写三角形，先将梯形变成三角形。

1.设置宽高为0
2.给border-width设置值.
3.边框设置颜色

梯形转化为三角形

（3）向下三角形

1.设置div高宽为0
2.设置border-width值
3.其余三条边为transparent（透明），视觉效果为下三角。

下三角效果