最近看到一个css画三角形的方法，非常有趣。
直接贴代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>triangle</title>
<style>
.triangle{
width: 0;
height: 0;
border-left:50px solid red;
border-bottom:50px solid blue;
border-top:50px solid black;
border-right:50px solid purple
}
.triangle{
border:50px transparent solid;
border-top-color: black; //此处需要哪个位置的三角形，就可以设置那一边的三角形的颜色。此处取得是上方的三角形
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
感兴趣的同学可以深入探究原理，效果如下图：
Paste_Image.png
Paste_Image.png
网友评论