引言
日常使用css多半是为HTML添加样式,使之更加美观,或是实现某些功能。日常对css的使用会让我们感到无趣,但其实css还能够实现许多有趣且令人感到意外的功能。因为在网页的设计过程中有道的很多是盒模型,这也使得网页上的图案多半是方的或是圆的;不知道大家是否想过画出其他的图形呢,例如五边形、六边形或是 ……三角形
画出三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画三角形</title>
<style>
.triangle{
width: 0px;
height: 0px;
border: 100px solid rgb(30, 206, 133);
border-bottom-color: transparent;
border-left-color:transparent;
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
画出来的三角形如下图:
原理
画三角形原理很简单,主要利用了border的性质。当我们为一个盒子添加边框时,看似是盒子的四周各添加了一条线,但实际上是盒子的四周各添加了一个梯形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画三角形</title>
<style>
.triangli{
width: 50px;
height: 50px;
border: 200px solid ;
border-top-color: rgb(30, 156, 206);
border-bottom-color: green;
border-left-color:pink;
border-right-color: rgb(30, 206, 133);
}
</style>
</head>
<body>
<div class="triangli"></div>
</body>
</html>
当盒子的大小为0时,各边边框就会成为一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画三角形</title>
<style>
.triangli{
width: 0px;\\ 盒子大小为0
height: 0px;
border: 200px solid ;
border-top-color: rgb(30, 156, 206);
border-bottom-color: green;
border-left-color:pink;
border-right-color: rgb(30, 206, 133);
}
</style>
</head>
<body>
<div class="triangli"></div>
</body>
</html>
利用这个原理可以画出等边三角形和直角三角形。画等边三角形,则把上图中不要的3个三角形的颜色设置为透明,例如我要留下1号(其他同理):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画三角形</title>
<style>
.triangli{
width: 0px;\\ 盒子大小为0
height: 0px;
border: 200px solid ;
border-top-color: rgb(30, 156, 206);
border-bottom-color: transparent;// 对应3号
border-left-color: transparent;// 对应4
border-right-color: transparent;// 对应2号
}
</style>
</head>
<body>
<div class="triangli"></div>
</body>
</html>
若要画直角三角形,则保留相邻的任意两个三角形(1 2或2 3或3 4或4 1)将他们的颜色设置相同,根据自己的需求确定保留的两个三角形。例如开篇所举的例子