成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS中的一下小技巧1之CSS3三角形運用

番茄西紅柿 / 3167人閱讀

摘要：后來知道原來可以用實現(xiàn)三角形，可是用過一次后很容易忘記，所以想把這個小技巧記錄起來是如何實現(xiàn)三角形的呢答案是通過邊框，也就是屬性。

使用CSS3實現(xiàn)三角形：

　　在前端頁面中有很多時候會遇到需要三角形圖案的時候，以前不知道可以用CSS3實現(xiàn)三角形的時候，一般都是叫UI把三角形圖案切出來。

　　后來知道原來可以用CSS3實現(xiàn)三角形，可是用過一次后很容易忘記，所以想把這個小技巧記錄起來~

　　CSS3是如何實現(xiàn)三角形的呢？——答案是通過邊框，也就是border屬性。

　　邊框

<style>
    .triangle{
        width: 100px;
        height: 100px;
        border: 30px solid palegreen;
        margin: 0 50px;
    }
style>
<div class="triangle">div>

 

　　這個時候是這個樣子的：

　　

　　接下來寬高設(shè)置為0，四邊都給上不同的顏色~

　　

<style>
    .triangle{
        width: 0;
        height: 0;
        margin: 0 50px;
        border-top: 30px solid palegreen;
        border-right: 30px solid deepskyblue;
        border-bottom: 30px solid palevioletred;
        border-left: 30px solid peru;
    }
style>
<div class="triangle">div>

　　變成了這樣~是不是有四個小三角形啊~

　　

　　既然出來了四個小三角形，那我們可以把不想要的三角形的顏色設(shè)置透明即可：

　　

.triangle-left,.triangle-right,.triangle-bottom,.triangle-top{
        width: 0;
        height: 0;
        margin: 0 50px;
        border: 30px solid transparent;
    }
    .triangle-left{
        border-left: 30px solid peru;
    }
    .triangle-right{
        border-right: 30px solid palevioletred;
    }
    .triangle-bottom{
        border-bottom: 30px solid deeppink;
    }
    .triangle-top{
        border-top: 30px solid palegreen;
    }
style>
<div class="triangle-left">div>
<div class="triangle-top">div>
<div class="triangle-right">div>
<div class="triangle-bottom">div>

　　這樣我們就得到了所有方向的三角形啦~

　　

　　在項目中可以將這些隨意搭配，隨意發(fā)揮啦~

 

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1191.html

相關(guān)文章

  • CSS中的一下小技巧2之CSS3動畫勾選運用

    使用CSS3實現(xiàn)動畫勾選 　　相信大家在項目中會經(jīng)常遇到這種需求：勾選框?，F(xiàn)在用CSS3來實現(xiàn)一個動畫勾選，只需要一個標簽即可完成： 　　這次需要用到CSS中偽類?after，這個小技巧也是很容易忘記的，所以決定記錄起來~ 　　首先給標簽加寬高加背景色： .check{ width: 40px; height: 40px; backgr...

    gaara 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^程持續(xù)一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評論0 收藏0

  • CSS開發(fā)

    摘要：譯十六進制顏色揭秘原文地址原文作者譯文出自掘金翻譯計劃本文永久鏈接教程入門篇關(guān)于是一款進行柵格布局的輔助工具，它讓開發(fā)者擺脫了冗雜的數(shù)學計算，同時降低了樣式與結(jié)構(gòu)的耦合程度。 【譯】CSS 十六進制顏色揭秘 原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.com/xitu/...

    warkiz 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    mikasa 評論0 收藏0

  • HTML-CSS-JS

    摘要：本周于上海閉幕，掘金和知乎上都有對應(yīng)的實錄和問答，但會議的視頻目前都還沒放出來，有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術(shù)博客推薦推薦一些現(xiàn)在還在堅持原創(chuàng)的博主，有業(yè)界大牛，也有小鮮肉，也有國外美女。 CSS 樣式書寫規(guī)范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規(guī)范，可以結(jié)合自身團隊發(fā)展出一套適合自己業(yè)務(wù)的規(guī)范。 CSS中的字體與排版...

    李世贊 評論0 收藏0

發(fā)表評論

0條評論

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