国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css 實現各種基本圖形

Elle / 2535人閱讀

摘要:三角形三個角分別是,此時畫五角星等價于畫三個三角形。所以理論上,通過控制一個三條的長度,進而實現不同大小的三角形是可行。實踐了一番,由于很難得到一個整數值,所以通過這種方法畫正五角形幾乎是無法實現的。

三角形

寫 css 的時候,用慣了背景圖,忽略了 css 本身其實可以實現很多簡單的基本圖形,比如三角形:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

效果圖:

百思不得qijie,為啥寬高為 0,卻能顯示一個三角形?平常的邊框,看上去都是四條直線,其實不然,修改三角型代碼,展示其兩條邊為例:

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

效果圖:

恍然大悟,原來邊框其實是等腰梯形

那么還可以做其他哪些圖形(以下代碼摘自 the shapes of css)?

圓形

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

主要利用了 border-radius 屬性,將矩形圓角化。其值可以使用長度(px),也可以使用百分比。百分比會轉化成長度,比如此例中,50% 表示 水平圓角半徑=寬度*50%垂直圓角半徑=高度*50%所以直接寫 100px 也是等價的。

平行四邊形

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

利用 transform 傾斜特性如下:

向x軸方向(水平向右)傾斜 160°:可以想象為矩形的右側邊沿著逆時針方向旋轉 160°(當旋轉 90° 時,四條邊重合,圖形會消失;當旋轉超過 90° 時,類似對稱;當旋轉超過 180° 時,便類似轉圈了)

向 y 軸方向(水平向下)傾斜,可以想象為矩形底邊沿著順時針方向旋轉。

五角形

是時候提高下難度了,我們來看下怎么畫五角形???五角星可以看成是由三個等腰三角形組成。

三角形三個角分別是 36°、36°、108°,此時畫五角星等價于畫三個三角形。文章開頭提到的方法只能畫角度固定的等腰三角形。仔細研究下 border,其實角度是可控的,如下所示:

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

通過給邊框設置不同的長度,會影響到邊框的形狀:以上圖紅色三角形為例它的底邊長為 border-left + border-right;高中學習的余弦定理得知:通過已知三角形的角度和任意一邊的長度,可以確定三角形的形狀。所以理論上,通過控制一個 div 三條 border 的長度,進而實現不同大小的三角形是可行。實踐了一番,由于很難得到一個整數值,所以通過這種方法畫正五角形幾乎是無法實現的。

原文的代碼如下(很驚訝原作者是如何算出來這些邊框寬度的):

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: "";
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: "";
}
其他有趣的圖形

鉆石

通過一個梯形和一個三角形組合而成

吃豆人

一個圓形,隱藏右側邊

對話框

一個三角形,加一個圓角矩形

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/115504.html

相關文章

  • 前端圖像處理指南

    摘要:本文會介紹位圖處理,矢量圖和圖像處理,重點是,并且最后會附上一個小應用。以上列舉部分,更多備胎在此矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標商業動畫元素上應用非常廣范。 計算機圖像處理是一門很成熟的技術,任何一門可操作系統接口的語言都能很輕易的實現各種處理操作。但是前端限于瀏覽器環境和接口限制,處理起來會有諸多不便,這里所說的前端圖像處理,是真的指不借助任何后端服務純前端實現的圖像...

    Anshiii 評論0 收藏0
  • 前端圖像處理指南

    摘要:本文會介紹位圖處理,矢量圖和圖像處理,重點是,并且最后會附上一個小應用。以上列舉部分,更多備胎在此矢量圖處理講完位圖再說矢量圖。矢量圖在繪制圖標商業動畫元素上應用非常廣范。 計算機圖像處理是一門很成熟的技術,任何一門可操作系統接口的語言都能很輕易的實現各種處理操作。但是前端限于瀏覽器環境和接口限制,處理起來會有諸多不便,這里所說的前端圖像處理,是真的指不借助任何后端服務純前端實現的圖像...

    CatalpaFlat 評論0 收藏0
  • CSS圖形繪制總結

    摘要:由張鑫旭大佬的幾篇文章常見的圖形繪制合集,小純實現打字動畫效果,分享三個純實現個英文字母的案例,發現了,一些特殊用法,由此想到自己做個總結。 由張鑫旭大佬的幾篇文章常見的CSS圖形繪制合集,小tips: 純CSS實現打字動畫效果,分享三個純CSS實現26個英文字母的案例,發現了border,border-radius, box-shadow一些特殊用法,由此想到自己做個總結。 bord...

    SQC 評論0 收藏0
  • SVG 揚帆起航

    摘要:基本的文檔由根元素和基本形狀元素構成作為的一種方言,必須正確的綁定命名空間在屬性中綁定。另外,命令不用區分大小寫三次貝塞爾曲線或分別是起點終點控制點。不過,可以實現其功能與效果,因此,此屬性已經被廢棄。可謂因為兄弟相爭而年少隕落的天王。 原文鏈接:http://hangyangws.win/2017/04...本文不能讓你成為 SVG 大神,但是能讓你知道、了解他「揭開神秘面紗」 基礎...

    tanglijun 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<