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边框为梯形，点击查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border标签 part2</title>
<style>
/*颜色的分割是梯形，不是长方形。*/
#box{
width:10px;
height:10px;
border: 10px solid ;
border-color: #06a43a deeppink yellowgreen rebeccapurple;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>注意：边框交替处为斜边，是个梯形，用此属性写三角形
（2）开始用边框写三角形，先将梯形变成三角形。
1.设置宽高为0 2.给border-width设置值. 3.边框设置颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border标签 part2</title>
<style>
/*设置成三角形*/
#box1{
width:0;
height:0;
border:40px solid;
border-color: #06a43a deeppink yellowgreen rebeccapurple;
}
</style>
</head>
<body>
<div id="box1"></div><br/>
</body>
</html>
（3）向下三角形
1.设置div高宽为0 2.设置border-width值 3.其余三条边为transparent（透明），视觉效果为下三角。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border标签 part2</title>
<style>
/*设置成向下三角形 transparent：透明 */
#box2{
width:0px;
height: 0px;
border: 40px solid ;
border-color: #06a43a transparent
transparent;
}
</style>
</head>
<body>
<div id="box2"></div>
</body>
</html>
相关推荐
猫沙盆 2020-07-07
葉無聞 2020-06-09
buttonChan 2020-04-10
sdbxpjzq 2019-12-03
myloveqiqi 2020-08-09
猫沙盆 2020-07-08
福叔 2020-06-02
CaiKanXP 2020-06-02
opspider 2020-05-29
jiedinghui 2020-02-20
MaureenChen 2020-02-17
zengni 2019-12-03
AlisaClass 2020-07-19
impress 2020-01-06
大象从不倒下 2020-07-31
云端漂移 2020-07-06
xiaohuli 2020-06-11