<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小三角
</title>
<style>
.z_r:before{
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid red;
position: absolute;
top: -10px;
left: 20px;
}
.z_r:after{
content: '';
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid white;
position: absolute;
top: -8px;
left: 20px;
}
.z_r {
position: absolute;
width: 100px;
margin: 100px auto;
background-color: white;
border: 1px solid red;
text-align: center;
}
body {
background-color: black
}
</style>
</head>
<body>
<div class="z_r">伪元素箭头
</div>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-51374.html
