HTML 通过CSS生成小三角
有些时候我们需要在特定的地方使用小三角,例如小米商城官网显示二维码的时候,下面的小三角。
其实这里实现的方式很简单,我们可以通过一个伪类::after配合边框来实现实现,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style>
.box1{
width: 0px;
height: 0px;
/* 通过边框来获取三角形 */
border: 10px solid red;
/* 我们这里需要的是一个向上的三角形,所以需要去除三边框,其他三个边度不能去掉 */
border-top: none;
/* 设置边框各边的颜色,颜色顺序依次是:上右下左。 */
/* 在通过transprent将不需要的三角形的颜色设置为透明状态 */
border-color: transparent transparent green transparent;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>