《CSS揭秘》：切角效果

JerryZou 發(fā)布于2019-08-29 11:18 / 2355人閱讀

摘要：切角效果切角效果是一種常見的視覺風(fēng)格設(shè)計。但是現(xiàn)在在里，依然無法簡單的生成切角效果。原文位于揭秘切角效果。裁切路徑方案使用裁切路徑可以在裁切任意多邊形，下面的代碼可以切除和上文一樣的效果。改變切角深度時需要同時改變個地方。

切角效果

切角效果是一種常見的視覺風(fēng)格設(shè)計。但是現(xiàn)在在CSS里，依然無法簡單的生成切角效果。

css漸變

使用CSS漸變[linear-parent][1]可以形成切角風(fēng)格

background: #58a;
background: linear-gradient(-45deg, transparent 15px, #58a 0);

如果想要四個角都切，則可以

background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
            linear-gradient(-135deg, transparent 15px, #58a 0) top right,
            linear-gradient(-45deg, transparent 15px, #58a 0) bottomright,
            linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

內(nèi)聯(lián)SVG與border-image方案

SVG方案不熟悉，暫時不討論。原文位于《CSS》揭秘12:切角效果。

裁切路徑方案

使用裁切路徑可以在裁切任意多邊形，下面的代碼可以切除和上文一樣的效果。其實就是指定了八個頂點。

clip-path:
    polygon(
        15px 0, calc(100% - 15px) 0, 100% 15px, 
        100% calc(100% -  15px), calc(100% - 15px) 100%,
        15px 100%, 0 calc(100% - 15px), 0 15px
    );

使用本方案雖然簡短，但是維護缺并不方便。改變切角深度時需要同時改變8個地方。使用css與處理器的mixin會方便很多。

GPU云服務(wù)器云服務(wù)器 css效果效果顯示 css jquery 氣球css js效果 js和css效果圖

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

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

相關(guān)文章

css揭秘筆記——形狀

摘要：把改成，就變成了這樣實現(xiàn)邊框內(nèi)圓角多重邊框還有下實現(xiàn)多重背景為某一層背景單獨設(shè)置類似這樣的屬性等等。裁切路徑方案這種方案，當(dāng)內(nèi)邊距不夠?qū)挄r，會裁切掉文本。自適應(yīng)的橢圓（border-radius的用法）單獨指定水平和垂直半徑長寬固定的元素，可以通過指定寬高的一半，變?yōu)闄E圓形，格式為兩個值用/分開。 width: 100px; height: 80px; border-radi...

dantezhao 2019-08-29 13:47 評論0 收藏0
css-secrets (css揭秘) 知識點目錄，值得深入學(xué)習(xí)！

摘要：通過模糊來弱化背景和滾動提示使用兩層背景，控制交互式的圖片對比控件范圍輸入控件方式書中有很詳細(xì)的解答提醒自己要回顧。 1. 第一章 css編碼技巧第二章邊框與背景半透明邊框 hsla 多重邊框 box-shadow outline 靈活的背景定位 background-position css3該屬性可以指定偏移量，////bac...

DevWiki 2019-08-30 15:56 評論0 收藏0
《css揭秘》讀書筆記

摘要：但是根據(jù)本司機兩年的開發(fā)經(jīng)驗來看，在實際開發(fā)中很少來使用這個單位。由于基本都是一些實用性的技巧，我就不一一列舉了，建議自讀。很好很實用的一本書。第一章引言 css編碼技巧在引言中，作者提到使用em與inherit來實現(xiàn)css代碼的簡潔與可維護性。但是根據(jù)本司機兩年的開發(fā)經(jīng)驗來看，在實際開發(fā)中很少來使用em這個單位。如何用以及何時去使用，還是要根據(jù)實際開發(fā)需求來定吧，畢竟這兩個屬性...

xiguadada 2019-08-29 16:28 評論0 收藏0
《css 揭秘》讀書筆記

摘要：因為鮮為人知的第四個長度參數(shù)雙層投影毛玻璃效果見毛玻璃自定義復(fù)選框不多介紹，也有相關(guān)案例復(fù)選框滾動提示現(xiàn)在越來越多的移動端都是這樣處理，滾動提示其他揭秘對應(yīng)的地址圖靈圖書在封底都提供優(yōu)惠碼低價購買電子書她目標(biāo) 如何用 css 解決難題收獲盡量減少代碼重復(fù) 1 用相對值 font-size: 20px; line-height: 30px; // 應(yīng)該改成 font-size:...

OnlyMyRailgun 2019-08-29 13:20 評論0 收藏0
[CSS]《CSS揭秘》第三章——形狀

摘要：自適應(yīng)橢圓斜杠前為水平半徑，后為垂直半徑。和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。所以不要用或展示有實際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容，例如圖標(biāo)。和必須配合屬性來使用，用來定義插入的內(nèi)容，必須有值，至少是空。自適應(yīng)橢圓 border-radius:50% / 50%;//斜杠前為水平半徑，后為垂直半徑。 background: #fb3; b...

ysl_unh 2019-08-30 15:53 評論0 收藏0