使用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）
/* CSS部分 */ul { list-style:none margin:0 padding:0 text-align:center background:#F03 color:#FFF -webkit-transform:scaleY(0) -webkit-transform-origin:0 0 }
li { padding:0 margin:0 }
div { width:200px }
div:hover ul { -webkit-animation:ulShow 0.4s -webkit-animation-fill-mode:forwards -webkit-animation-timing-function: cubic-bezier(0,0.8,0.9,1) }
div div { height:30px line-height:30px text-align:center background-color:#FC0 }
@-webkit-keyframes ulShow {
from { -webkit-transform:scaleY(0) }
to { -webkit-transform:scaleY(1) }
} <!-- HTML部分 -->
<div>
<div>下拉 </div>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
</div>
本例适用于谷歌浏览器和Safari浏览器，如需兼容Opera须将“-webkit-”更改为”-o-“，火狐改为“-moz-
”，IE系列比较复杂在此不予举例详情请查询W3C。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.list { width: 500px margin: 0 auto display: flex }
.list > .item { flex: 1 margin: 10px position: relative text-align: center }
.list > .item input { opacity: 0 position: absolute left: 0 top: 0 right: 0 bottom: 0 width: 100% height: 100% z-index: 2 }
.list > .item input ~ .text { border: 1px solid #eee padding: 10px position: relative }
.list > .item input:checked ~ .text { border-color: red color: red }
</style>
</head>
<body>
<div class="list">
<div class="item">
<input type="radio" name="list" value="1" />
<div class="text">选项1</div>
</div>
<div class="item">
<input type="radio" name="list" value="2" />
<div class="text">选项2</div>
</div>
<div class="item">
<input type="radio" name="list" value="3" />
<div class="text">选项3</div>
</div>
<div class="item">
<input type="radio" name="list" value="4" />
<div class="text">选项4</div>
</div>
</div>
</body>
</html>
CSS3 element1~element2 选择器
CSS3 :checked 选择器
