<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>三角形</title>
<style>
div{
width:0;height:0;
border: 20px solid;
/*平分效果*/
border-color:red green blue black;
/*单个三角形*/
/*border-color:transparent transparent lightgreen transparent;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
/* 向上的箭头 */
.dot-top {
position: relative;
top: 21px;
left: 3rem;
font-size: 0;
line-height: 0;
border: 10px dashed #eeeeee;
border-top-width: 0;
border-right-color: transparent;
border-bottom-style: solid;
border-left-color: transparent;
}
/* 向下箭头旋转-展开内容 */
i{
width: .14rem;
height: .08rem;
background: url('../images/down@2x.png') no-repeat center;
background-size: 100% 100%;
transition: transform 0.3s ease;
-moz-transition: -moz-transform 0.3s ease;
-webkit-transition: -webkit-transform 0.3s ease;
-o-transition: -o-transform 0.3s ease;
}
.up {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
