使用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伪类制作三角形的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hbase+hive应用场景
- 下一篇： Windows Phone性能优化建议