来源:
网页中常见的一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS三角制作</title>
<style>
body {
background-color: #ccc;
}
span {
display: block;
}
.box {
width: 0;
height: 0;
margin: 20px auto;
line-height: 0;
font-size: 0;
border: 50px solid transparent;
}
.box1 {
border-top-color: red;
border-right-color: blue;
border-bottom-color: yellow;
border-left-color: pink;
}
.box2 {
border-top-color: orange;
}
.box3 {
border-right-color: green;
}
.box4 {
border-bottom-color: brown;
}
.box5 {
border-left-color: white;
}
</style>
</head>
<body>
<span class="box box1"></span>
<span class="box box2"></span>
<span class="box box3"></span>
<span class="box box4"></span>
<span class="box box5"></span>
</body>
</html>

image.png