<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設(shè)置一個(gè)玩玩*/
? ? ? ? ? ?-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;
? ? ? ? ? ?/*平行四邊行完全可以用旋轉(zhuǎn)實(shí)現(xiàn)*/
? ? ? ? ? ?-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
