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

資訊專欄INFORMATION COLUMN

用 CSS 實(shí)現(xiàn)三角形與平行四邊形

Martin91 / 1589人閱讀

摘要：所以我們需要加一個(gè)內(nèi)層元素，并對(duì)內(nèi)層元素做一次逆向的歪曲，從而得到我們想要的效果實(shí)現(xiàn)代碼如下，另附示例上?？偨Y(jié)第一種方法使用屬性出三角形，并通過對(duì)三個(gè)元素進(jìn)行拼接最終實(shí)現(xiàn)了平行四邊形而第二種方法則通過來得到平行四邊形。

本文最初發(fā)布于我的個(gè)人博客：咀嚼之味

最近在逛某個(gè)技術(shù)網(wǎng)站的時(shí)候，感覺文章關(guān)鍵詞上的樣式好酷炫啊。于是我將那種寫法照搬到了我的博客中，也許最近逛過我博客的小伙伴已經(jīng)發(fā)現(xiàn)了它出現(xiàn)在哪兒了——分頁的樣式。來張截圖：

你在首頁的底部也可以看到這樣一個(gè)分頁欄；是不是看上去還不錯(cuò)？下面就來看看這是如何實(shí)現(xiàn)的吧~

第一種方法：利用border

第一種方法是借助border屬性 hack 出三角形，然后通過一個(gè)矩形拼接兩個(gè)三角形最終制造出一個(gè)平行四邊形。為什么使用border可以產(chǎn)生三角形呢？先來看看一張圖片：

看了圖中的三個(gè)小圖形的變化過程，你應(yīng)該已經(jīng)清楚了一半。其實(shí) hack 出三角形只需要兩個(gè)條件，第一，元素本身的長(zhǎng)寬為0；其次，將不需要的部分通過 border-color 來設(shè)置隱藏。通過類似的方法，你還可以創(chuàng)造出梯形，上圖中的三個(gè)圖形的代碼如下。（另附 CodePen 示例）

#first {
  width: 20px;
  height: 20px;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}

#second {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red green blue brown;
}

#third {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: red transparent transparent transparent;
}

接下來就要考慮如何拼接出一個(gè)平行四邊形了。在border法中，它由三部分組成，分別是左三角形、矩形、右三角形。如果每次繪制平行四邊形都要?jiǎng)?chuàng)建三個(gè)元素顯然過于麻煩了，所以在這里:before和:after偽元素是個(gè)不錯(cuò)的選擇。下面我們實(shí)現(xiàn)一下這樣的效果：

為了將三角形與矩形無縫拼接到一起，多處屬性要保持一致，所以使用類似 Less, Sass, Stylus 等 CSS 預(yù)處理器來寫這段代碼會(huì)更容易維護(hù)，下面給出 Scss 版本的代碼。（另附 CodePen 鏈接）

//三角形的寬高
$height: 24px;
$width: 12px;

//對(duì)平行四邊形三部分的顏色進(jìn)行賦值
@mixin parallelogram-color($color) {
  background: $color;
  &:before { border-color: transparent $color $color transparent; }
  &:after { border-color: $color transparent transparent $color; }
}

//單個(gè)三角形的樣式
@mixin triangle() {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  border-width: $height/2 $width/2;
  top: 0;
}

//平行四邊形的樣式
.para {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  height: $height;
  line-height: $height;
  margin-left: $width;
  color: #fff;

  &:after {
    @include triangle();
    right: -$width;
  }

  &:before {
    @include triangle();
    left: -$width;
  }

  @include parallelogram-color(red);
}

需要注意的是，如果通過 $height、$width 設(shè)置的三角形斜率太小或太大都有可能造成渲染出鋸齒，所以使用起來要多多測(cè)試一下不同的寬高所得到的視覺效果如何。

第二種方法：利用transform

使用transform來實(shí)現(xiàn)平行四邊形的方法是我在逛去啊的時(shí)候看到的，效果大概是這個(gè)樣子：

看到之后覺得好神奇啊，原來還可以只有平行四邊形的外輪廓。（因?yàn)榉椒ㄒ恢荒軇?chuàng)造填充效果的平行四邊形）實(shí)現(xiàn)起來非常簡(jiǎn)單，主要是借助了transform: skew(...)，下面就來看看源碼吧。




上海

于是我們得到了這樣的效果：

看到圖片的你一定是這樣想的：

別著急嘛，我們的確是把整個(gè) div 進(jìn)行了歪曲，導(dǎo)致中間的文字也是傾斜的，而這顯然不是我們所要的效果。所以我們需要加一個(gè)內(nèi)層元素，并對(duì)內(nèi)層元素做一次逆向的歪曲，從而得到我們想要的效果：

實(shí)現(xiàn)代碼如下，另附 CodePen 示例





  
上海
總結(jié)

第一種方法使用 border 屬性 hack 出三角形，并通過對(duì)三個(gè)元素進(jìn)行拼接最終實(shí)現(xiàn)了平行四邊形；而第二種方法則通過 transform: skew 來得到平行四邊形?？傮w來說，第二種方法相對(duì)于第一種代碼量小得多，而且也很好理解。唯一的不足是無法構(gòu)造像本站的分頁中所使用的梯形。希望本文對(duì)各位有所幫助。

UPDATE

**2015.8.18**, @前端農(nóng)民工 給出了一個(gè) CSS-Tricks 的鏈接，是關(guān)于各種用 CSS 繪制幾何圖形的方法，淺顯易懂，推薦大家看看！

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

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

相關(guān)文章

  • 記錄一次搜狐面試（包括筆試題）

    摘要：協(xié)議主要是通過請(qǐng)求頭當(dāng)中的一些字段來和服務(wù)器進(jìn)行通信，從而采用不同的緩存策略。會(huì)緩存所有的結(jié)構(gòu)，但是問題在于，一些頁面開始時(shí)進(jìn)行的上報(bào)或者請(qǐng)求可能會(huì)被影響。 1.如何用一個(gè)div實(shí)現(xiàn)下圖 showImg(https://segmentfault.com/img/bVbm8Rf?w=133&h=134); css #demo{ width:120px; h...

    tianhang 評(píng)論0 收藏0

  • 記錄一次搜狐面試（包括筆試題）

    摘要：協(xié)議主要是通過請(qǐng)求頭當(dāng)中的一些字段來和服務(wù)器進(jìn)行通信，從而采用不同的緩存策略。會(huì)緩存所有的結(jié)構(gòu)，但是問題在于，一些頁面開始時(shí)進(jìn)行的上報(bào)或者請(qǐng)求可能會(huì)被影響。 1.如何用一個(gè)div實(shí)現(xiàn)下圖 showImg(https://segmentfault.com/img/bVbm8Rf?w=133&h=134); css #demo{ width:120px; h...

    bladefury 評(píng)論0 收藏0

  • css繪制各種各樣的形狀圖形

    摘要：我們?cè)诰帉懬岸舜a時(shí)，經(jīng)常會(huì)遇到各種各樣的形狀圖形如邊框?qū)υ捒?，三角形，平行四邊形圓角邊框圓形四葉草花瓣等，除了用背景圖片雪碧圖或精靈圖定位引用和插入圖片的方法，我們還可以用邊框圓角漸變和定位的方法結(jié)合使用，繪制各種各樣的形狀圖形。 我們?cè)诰帉懬岸舜a時(shí)，經(jīng)常會(huì)遇到各種各樣的形狀圖形（如：邊框?qū)υ捒?，三角形，平行四邊形、圓角邊框、圓形、四葉草、花瓣等），除了用背景圖片（css雪碧圖或c...

    mingde 評(píng)論0 收藏0

  • css繪制各種各樣的形狀圖形

    摘要：我們?cè)诰帉懬岸舜a時(shí)，經(jīng)常會(huì)遇到各種各樣的形狀圖形如邊框?qū)υ捒?，三角形，平行四邊形圓角邊框圓形四葉草花瓣等，除了用背景圖片雪碧圖或精靈圖定位引用和插入圖片的方法，我們還可以用邊框圓角漸變和定位的方法結(jié)合使用，繪制各種各樣的形狀圖形。 我們?cè)诰帉懬岸舜a時(shí)，經(jīng)常會(huì)遇到各種各樣的形狀圖形（如：邊框?qū)υ捒?，三角形，平行四邊形、圓角邊框、圓形、四葉草、花瓣等），除了用背景圖片（css雪碧圖或c...

    levinit 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<