當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用before、after伪类制作三角形

發布時間：2023/12/2 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了使用before、after伪类制作三角形小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用before、after偽類實現三角形的制作，不需要再為三角形增加不必要的DOM元素，影響閱讀。

<!DOCTYPE html>
<html>
<head>
??? <style>
??????? div{
??????????? width: 100px;
??????????? height: 100px;
??????????? border: 1px solid #ccc;
??????? }
??????? div:before,
??????? div:after{
??????????? content: "";
??????????? position: absolute;
??????????? top: 40px;
??????????? left: 100px;
??????????? width: 0px;
??????????? height: 0px;
??????????? border: 10px solid transparent;
??????????? border-left-color: rgb(255,255,255);

??????? }
??????? div:before{
??????????? top: 39px;
??????????? border: 11px solid transparent;
??????????? border-left-color: #ccc;
??????? }
??? </style>
?? ?
</head>
<body>
??? <div></div>
</body>
</html>

轉載于:https://www.cnblogs.com/charling/p/3655683.html

總結

以上是生活随笔為你收集整理的使用before、after伪类制作三角形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

角形