css偽元素應用場景
阿新 • • 發佈：2020-08-11
想起年初遇到的一個css題，怎樣實現下圖所示的圖形（這是我新寫出來的效果圖，大致是這樣子的）：
思路：用兩個div，實現左下和右上兩個部分，可以，但遇到的問題很多，比如如何畫三角形、如何組合兩個div的位置，如何將文字顯示在每個div裡面等，而且這個效果其實更像是一個整體，用兩個div來構建總顯得不太合理和優雅。因此，我們考慮用一個div結合偽元素的方法實現。
首先我們定義文件結構如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <metaname="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="corner"> <span>aaa</span> </div> </body> </html>
重點是css,我們定義div的基本內容，長寬、背景、水平居中等屬性（relative方便偽元素定位）：
#corner { width: 100px; height: 100px; background: #fff; margin: 0 auto; position: relative; }
左下角我們用偽元素：before畫一個紅色的三角形，如何畫三角形、圓等常見圖案可以自行百度：
#corner::before { content: ""; position: absolute; width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent; }
接著用：after填充bbb這部分內容，並把它放右上角，最後調整下span的格式就完成任務了：
#corner::after { content: "bbb"; position: absolute; right: 0; } span{ position: absolute; bottom: 0; }
當然，這只是我的一個思路，還有很多可以實現此狀態的方法，歡迎大佬拍磚提供思路。