css三角形

<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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、圓形 CSS代碼如下:寬高一樣,border-radius設(shè)為寬高的一半 #circle{width:100p...
    無名小碼農(nóng)閱讀 991評論 0 0
  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,978評論 0 8
  • 1、垂直對齊 如果你用CSS,則你會(huì)有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,297評論 0 11
  • 5.橢圓 #ellipse{ width: 200px; height: 100px; background-co...
    小茶葉葉閱讀 2,211評論 0 1
  • 之前文章里提過活在當(dāng)下,那個(gè)時(shí)候我還認(rèn)為:不念過去,不畏將來,活在當(dāng)下,指的就是好好過好現(xiàn)在,但其實(shí)這里有很多不符...
    王小Q619閱讀 177評論 0 1

友情鏈接更多精彩內(nèi)容