网页中常见一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标。
例如,一个盒子设置宽高都为0,设置四个边框为不同的颜色:
展示出来的效果如下,每个边框展示出来是个三角形:
所以,如果要做出一个三角形,让其它三个边框都是透明色就可以了。
朝下指的三角:
朝右指的三角:
现在想做出如下的效果来(在大盒子上面有个向上的三角):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 120px;
height: 250px;
background-color: pink;
}
.box span {
position: absolute;
right: 15px;
top: -20px;
width: 0;
height: 0;
/* 为了照顾兼容性 */
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-bottom-color: pink;
}
</style>
</head>
<body>
<div class="box">
<span></span>
</div>
</body>
</html>