<html lang="en">
<meta charset="UTF-8">
<title>css3三角形画法
.content{
width:0px;
height:0px;
margin:50px auto 0px;
border-width:150px;
border-color:#666 #CC0066 #CC9966 #FFCC33;
border-style:solid;
}
<div class="content">
</html>
<html lang="en">
<meta charset="UTF-8">
<title>css3三角形画法
.content{
width:0;
height:0;
margin:50px auto 0px; /*没有修改width 和 height 而是用了padding*/
padding:50px; border-width:150px;
border-color:#666 #CC0066 #CC9966 #FFCC33;
border-style:solid; /*还可以把border-radius设置一个玩玩*/
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
<div class="content">
</html>
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>css3三角形画法
div{
margin:30px auto 0px;
}
.content-1{
width:0px;
height:0px; /*梯形借助了padding*/
padding:10px 20px;
border-width:0px 50px 50px 50px;
border-color:transparent
transparent #666
transparent;
border-style:solid;
}
.content-2{
width:0px;
height:0px;
padding:20px 10px;
border-width:50px 50px 50px 0px;
border-color:transparent #666
transparent
transparent;
border-style:solid;
/*喇叭效果*/
-webkit-box-shadow:inset 15px 0 #666;
-moz-box-shadow:inset 15px 0 #666;
box-shadow:inset 15px 0 #666;
}
.content-3{
width:100px;
height:100px;
background:#666;
/*平行四边行完全可以用旋转实现*/
-webkit-transform:skew(-30deg);
-moz-transform:skew(-30deg);
-ms-transform:skew(-30deg);
-o-transform:skew(-30deg);
transform:skew(-30deg);
}
<div class="content-1">
<div class="content-2">
<div class="content-3">
</html>
原文地址：http://www.qdfuns.com/house/24824.html
网友评论