今天带来的是用纯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>
三角形的绘制到此结束,有没有觉得很好玩呢?