使用CSS展示各种形状的三角形
今天带来的是用纯css样式来绘制三角形。直接进入代码：
先来解释几个样式：
solid：表示线条为实线。常用的线条有：dotted(点线)、dashed(虚线）
transparent：表示线条为透明。
先来看下代码的基本结构：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>三角展示</title> <style></style> </head> <body> <div id="div1"></div> </body> </html>
很简单的一段代码，只有一个div标签，id为div1。
1、上三角 
<style>
#div1 {
width:0px;
height:0px;
border-right:30px solid transparent;
border-bottom:30px solid red;
border-left:30px solid transparent;
}
</style>
2、下三角 
<style>
#div1 {
width:0px;
height:0px;
border-top:30px solid red;
border-right:30px solid transparent;
border-left:30px solid transparent;
}
</style>
3、左三角 
<style>
#div1 {
width:0px;
height:0px;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-left:30px solid red;
}
</style>4、右三角
<style>
#div1 {
width:0px;
height:0px;
border-top:30px solid transparent;
border-right:30px solid red;
border-bottom:30px solid transparent;
}
</style>
5、左上三角 
<style>
#div1 {
width:0px;
height:0px;
border-top:30px solid red;
border-right:30px solid transparent;
border-bottom:30px solid transparent;
border-left:30px solid red;
}
</style>
6、右上三角
<style>
#div1 {
width:0px;
height:0px;
border-top:30px solid red;
border-right:30px solid red;
border-bottom:30px solid transparent;
border-left:30px solid transparent;
}
</style>
7、左下三角
<style>
#div1 {
width:0px;
height:0px;
border-top:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid red;
border-left:30px solid red;
}
</style>
8、右下三角
<style>
#div1 {
width:0px;
height:0px;
border-top:30px solid transparent;
border-right:30px solid red;
border-bottom:30px solid red;
border-left:30px solid transparent;
}
</style>三角形的绘制到此结束，有没有觉得很好玩呢？
相关推荐
jiedinghui 2020-10-25
Ladyseven 2020-10-22
zuncle 2020-09-28
xiaohuli 2020-09-02
葉無聞 2020-09-01
nicepainkiller 2020-08-20
AlisaClass 2020-08-09
myloveqiqi 2020-08-09
buttonChan 2020-08-02
drdrsky 2020-07-29
Ladyseven 2020-07-25
nicepainkiller 2020-07-24
AlisaClass 2020-07-19
hellowzm 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 2020-07-19
骆驼的自白 2020-07-18
lanzhusiyu 2020-07-19
hellowzm 2020-07-19
CSSEIKOCS 2020-07-18