<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>三角</title>
<style type="text/css">
/*空心下拉箭头*/
.triangle .content{
width: 10px;
height: 10px;
border:#666 solid;
border-width: 1px 1px 0 0;
transform: rotate(135deg);
margin-bottom: 10px;
}
/*实心三角*/
.triangle2 .content{
width: 0px;
height: 10px;
border: 10px solid;
border-color: #666 transparent transparent transparent;
}
/*空心圆*/
.circle .content{
width: 10px;
height: 20px;
border: 1px solid #666;
border-radius: 100% 0 0 100%/50%;
border-right: none;
margin-bottom: 10px;
}
/*实心圆*/
.circle2 .content{
width: 10px;
height: 20px;
border: 1px solid #999;
border-radius: 100% 0 0 100%/50%;
border-right: none;
background-color: #999;
}
</style>
</head>
<body>
<div class="triangle">
<div class="content"></div>
</div>
<div class="triangle2">
<div class="content"></div>
</div>
<!--空心圆-->
<div class="circle">
<div class="content"></div>
</div>
<!--实心圆-->
<div class="circle2">
<div class="content"></div>
</div>
</body>
</html>