摘要:具體樣式如下繪制圖標三當我們能深入理解一些屬性的時候,實現一些復雜的圖標完全不是難事無非就是將簡單的圖形組合起來。
CSS繪制圖標(一)
我們使用單個標簽繪制一個文件的圖標。HTML內容很簡單,就一句話。
右上角折疊三角采用after偽元素實現,左下角文字使用before偽元素實現。
主體部分當然還是div#doc。
具體CSS樣式如下:
#doc { position: relative; width: 155px; height: 200px; background: #0776ec; margin: 100px auto 0; border-radius: 10px; } #doc:after { position: absolute; content: ""; right: 0; top: 0; width: 0; height: 0; border:30px solid #59a8eb; border-top-color: #fff; border-right-color: #fff; border-bottom-left-radius: 10px; } #doc:before { position: absolute; content: "CSS"; bottom: 10px; left: 10px; color: #fff; font: 700 30px/30px "Microsoft YaHei"; }
一切似乎很美好,我們如愿以償的實現了該有的效果:
但是:這個效果還是有問題:當我們把瀏覽器背景顏色修改之后就可以發現了。
那如何做才能使右上角的白色三角區域為透明色呢?
CSS繪制圖標(二)到了解決問題的時候了,想要解決這個問題就不能不提box-shadow這CSS屬性了。
思路:還是使用after偽元素畫出右上角的三角形,但是需要使其border-top-color和border-right-color為透明色,主體部分的藍色使用after偽元素的box-shadow來模擬(給一個 很大的擴張半徑)。
box-shadow: 0 0 0 180px #0776ec;
所以可以看到效果是這樣的。
然后就好辦了,因為box-shadow是不占位置的,將這個after偽元素直接定位到div#docx的右上(right:0;top:0;)角。接著給div#docx一個寬高值,然后用overflow:hidden屬性將不必要的部分隱藏掉最后加一個圓角效果和文字就可以了。
這樣一來,效果就符合我們的預期。
具體CSS樣式如下:
body { background: pink; } #docx { position: relative; width: 155px; height: 200px; margin: 100px auto 0; border-radius: 10px; overflow: hidden; } #docx:after { position: absolute; content: ""; right: 0; top: 0; width: 0; height: 0; border:30px solid #59a8eb; border-top-color: transparent; border-right-color: transparent; border-bottom-left-radius: 10px; box-shadow: 0 0 0 180px #0776ec; } #docx:before{ z-index: 2; position: absolute; content: "CSS"; bottom: 10px; left: 10px; color: #fff; font: 700 30px/30px "Microsoft YaHei"; }CSS繪制圖標(三)
當我們能深入理解一些CSS屬性的時候,實現一些復雜的圖標完全不是難事(無非就是將簡單的圖形組合起來)。例如:可以使用border-radius畫出一個鷹嘴的形狀。
#test{ width: 100px; height: 100px; /*background: green;*/ margin: 30px auto 0; border-top:30px solid red; /*實現鷹嘴效果*/ border-top-left-radius: 80px 80px; }
有了這個圖形基礎,將各個基礎圖形組合起來,就能實現我們想要的任何圖標。例如:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113318.html
摘要:環境版本操作系統引言最近我媳婦每天晚上吃飯時候也拿手機看,上廁所也在看。所以我們先把這個動作封裝成一個函數抬筆移動畫筆到落筆接下來就來畫盾牌。盾牌的話,注意觀察美隊盾牌,顏色是紅白紅藍。 showImg(https://segmentfault.com/img/remote/1460000018621234?w=1024&h=578); 0 環境 Python版本:3.6.6 操作系統...
摘要:比如這種節點較多的單層拓撲稍復雜一些的再復雜一些的在這些拓撲圖中常見的場景是,很多網絡節點需要組成一組,這常被稱為網元組。常規的分組形狀有圓形矩形平行四邊形等,無論哪種形狀,分組多了后,就會產生審美疲勞。 前言 這段時間承蒙大家厚愛,給了我相當大碼字的動力,決定節前再更一彈。最近養成了回顧總結的好習慣,sf真是個不錯的地方。 最近忙著給客戶折騰一個復雜的多層嵌套關系??蛻粢痪湓捯?..
閱讀 994·2023-04-25 14:41
閱讀 2445·2021-09-28 09:35
閱讀 3619·2019-08-30 15:53
閱讀 1940·2019-08-29 15:26
閱讀 1059·2019-08-28 17:59
閱讀 4229·2019-08-26 13:45
閱讀 2834·2019-08-26 13:33
閱讀 1638·2019-08-26 11:46