CSS---利用偽類繪制倒三角形

本文轉載自查看原文 2016-06-09 20:47 4846 CSS

<html>
<head>
    <title></title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            position: relative;
            width: 100px;
            height: 100px;
            background: #f00;
        }
        .box:after{
            position: absolute;
            left: 0;
            bottom: 0;
            content: '';
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 10px solid #fff;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 css偽元素寫三角形如何用偽類畫出一個三角形 CSS實現三角形（偽類選擇器） CSS之border繪制三角形 css畫三角形、帶邊框的三角形、氣泡三角形 CSS畫三角形以及before,after偽元素的應用。 css 三角形空心三角形的簡單實現純CSS制作空心三角形和實心三角形及其實現原理使用before、after偽類制作三角形偽類實現特殊圖形，一個span加三角形