使用CSS样式写选择框右侧小三角

建站知识 2021-07-03 08:16www.168986.cn长沙网站建设

效果图如下所示

直接上代码！

<!DOCTYPE html>
<html lang="en">
<head>
<title>小三角</title>
<style>
.up-triangle{
width:0px;
height:0px;
border-bottom:30px solid #000;
border-left:15px solid transparent;
border-right:15px solid transparent;
margin:100px auto; 
}
.down-triangle{
width:0px;
height:0px;
border-:30px solid #000;
border-left:15px solid transparent;
border-right:15px solid transparent; 
margin:100px auto; 
}
.left-triangle{
width:0px;
height:0px;
border-right:30px solid #000;
border-:15px solid transparent;
border-bottom:15px solid transparent; 
margin:100px auto; 
}
.right-triangle{
width:0px;
height:0px;
border-left:30px solid #000;
border-:15px solid transparent;
border-bottom:15px solid transparent; 
margin:100px auto; 
}
</style>
</head>
<body>
<div class="up-triangle"></div>
<div class="down-triangle"></div>
<div class="left-triangle"></div>
<div class="right-triangle"></div>
</body>
</html>

以上所述是长沙网络推广给大家介绍的用CSS样式写选择框右侧小三角，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：使用css3做0.5px的细线的示例代码下一篇：CSS 埋点统计的示例代码

使用CSS样式写选择框右侧小三角

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

使用CSS样式写选择框右侧小三角

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设