三角型的常见写法，及三角的旋转
<style>
div{
margin:50px;
}
.triangle{
width:0;
height:0;
border-width:30px;
border-style:solid;
border-color:red blue yellow green;
overflow:hidden;
}
.triangle1{
border-width:30px;
border-color:#000 transparent transparent transparent;
border-style:solid dashed dashed dashed;
width:0;
height:0;
overflow:hidden;
}
.triangle2{
border-width:20px;
border-color:#000 #000 transparent transparent;
border-style:solid solid dashed dashed;
width:0;
height:0;
overflow:hidden;
}
.triangle3{
background: none repeat scroll 0 0 #E7E7E7;
color: #666666;
font: 12px/28px normal;
height: 28px;
position: relative;
width: 66p
}
.triangle3:after{
background: none repeat scroll 0 0 blue;
color: red;
content: ".";
height: 12px;
position: absolute;
right: -3px;
top: 7px;
transform: rotate(45deg);
width: 12px;
}
.triangle4{
color:#000;
}
.outWrap{
border: 1px solid #000;
width: 60px;
height: 30px;
line-height: 30px;
border: 1px solid #000;
}
.wrap b{
border-width: 6px;
border-color: #999 #fff #fff;
border-style: solid;
height: 0;
line-height: 0;
display: inline-block;
vertical-align: text-bottom;
font-size: 0;
transition: transform 0.2s ease-in 0s;
width: 0;
}
.wrap:hover b{
border-color: red #fff #fff #fff;
transform:rotate(180deg);
transform-origin:50% 30%;
}
</style>
</head>
<body>
<!--利用border实现三角-->
<div class="triangle"></div>
<!--90度方向三角-->
<div class="triangle1"></div>
<!--45度方向三角-->
<div class="triangle2"></div>
<!--利用矩形转一个角度，此处内容点要与背景色一致-->
<div class="triangle3"></div>
<!--利用html中的特殊字符▲■◆等-->
<div class="triangle4">▲</div>
<!--三角的旋转-->
<div class="outWrap">
<a class="wrap">
222
<b></b>
</a>
</div>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
