html中带描边的三角怎么写,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边框为梯形，点击查看

border标签 part2

/*颜色的分割是梯形，不是长方形。*/

#box{

width:10px;

height:10px;

border: 10px solid ;

border-color: #06a43a deeppink yellowgreen rebeccapurple;

}

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

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

1.设置宽高为0

2.给border-width设置值.

3.边框设置颜色

border标签 part2

/*设置成三角形*/

#box1{

width:0;

height:0;

border:40px solid;

border-color: #06a43a deeppink yellowgreen rebeccapurple;

}

(3)向下三角形

1.设置div高宽为0

2.设置border-width值

3.其余三条边为transparent(透明)，视觉效果为下三角。

border标签 part2

/*设置成向下三角形 transparent：透明 */

#box2{

width:0px;

height: 0px;

border: 40px solid ;

border-color: #06a43a transparent

transparent;

}