并非是CSS制作的,而是HTML的表单当中的下拉菜单标签
比如
<select><option>HTML5学堂</option>
<option>原创技术文章分享</option>
</select>
如果你不希望使用系统自定义的下拉菜单,那么,你需要使用各种元素(比如div),进行定位等处理,实现想要的样式,再之后,需要使用JS进行控制
使用CSS制作小三角形实际就是通过控制块元素的边框来实现的。
例如:
<style>
.triangle-up {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red
}
.triangle-down {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid red
}
.triangle-left {
width: 0
height: 0
border-top: 50px solid transparent
border-right: 100px solid red
border-bottom: 50px solid transparent
}
.triangle-right {
width: 0
height: 0
border-top: 50px solid transparent
border-left: 100px solid red
border-bottom: 50px solid transparent
}
</style>
<div class='triangle-down'></div> <!--向下三角形-->
<div class='triangle-up'></div> <!--向上三角形-->
<div class='triangle-left'></div> <!--向左三角形-->
<div class='triangle-right'></div> <!--向右三角形-->
原理就是设置块元素的三条边透明掉(tranparent)