<option id="ommq4"><strong id="ommq4"></strong></option><option id="ommq4"></option>

《CSS揭秘》：平行四邊形

yuxue 發布于2019-08-29 11:19 / 1442人閱讀

摘要：在視覺設計中，平行四邊形往往可以傳達出一種動感。問題使用來創建平行四邊形。將所有樣式應用到偽元素上，然后對偽元素進行變形。為了使偽元素保持良好的靈活性，可以自動繼承主元素的屬性。

在視覺設計中，平行四邊形往往可以傳達出一種動感。

問題

使用CSS來創建平行四邊形。可以使用transform: skewX(-45deg)

但是這樣會使里面的內容也傾斜。有兩種解決方案可以解決這個問題

嵌套元素方案

使用一層額外的HTML元素來包裹內容，對容器設置skewX，在內容上應用一次反向skewX變形

.button { transform: skewX(45deg); }
.button > div { transform: skewX(-45deg); }

結果如下：

偽元素方案

使用偽元素方案。將所有樣式應用到偽元素上，然后對偽元素進行變形。為了使偽元素保持良好的靈活性，可以自動繼承主元素的屬性。最簡單的方式是對主元素設置position:relative;,對偽元素設置positon:absolute;。

.button {
    position: relative;
    display: inline-block;
    padding: .5em 1em;
    border: 0; margin: .5em;
    background: transparent;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 200%/1 sans-serif;
}

.button::before {
    content: ""; /* To generate the box */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

得到的結果如下：

使用偽元素方案還可以實現一些其它效果，比如多重背景，邊框內圓角，多重邊框等。

GPU云服務器云服務器 html平行提交 python 平行線大揭秘揭秘云存儲

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

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

css揭秘筆記——形狀

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

dantezhao 2019-08-29 13:47 評論0 收藏0
《css 揭秘》讀書筆記

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

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

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

ysl_unh 2019-08-30 15:53 評論0 收藏0
css-secrets (css揭秘) 知識點目錄，值得深入學習！

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

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

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

xiguadada 2019-08-29 16:28 評論0 收藏0