用CSS實現三角形和平行四邊形

用CSS實現三角形和平行四邊形

這是新年第一篇文章聊一下吧，順便覺得三角形比較漂亮

不想寫東西直接丟程式碼能看懂看懂，看不懂算了，第四種強烈不推薦

 .first {
            width: 20px;
            height: 20px;
            border: 10px solid;
            border-color: red green blue brown;
        }

        .second {
            width: 0;
            height: 0;
            border: 10px solid;
            border-color: red green blue brown;
            margin: 10px 0;
        }

        .third {
            width: 0;
            height: 0;
            border: 10px solid;
            border-color: red transparent transparent transparent;
        }
        .fird{
            width: 100px;
            height: 30px;
            border:1px solid blue;
            transform: skew(-20deg);
            text-align: center;
        }
        .edg{
            transform: skew(20deg);
            line-height: 30px;
        }
        .pingx{
            display: inline-block;
            color:#fff;
            padding: 0 10px;
            position: relative;
            height: 10px;
            line-height: 10px;
            margin-left: 10px;
        }
        .pingx::before{ 
            content: '';
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: 0;
            border-style: solid;
            border-width: 10px 10px;
            border-color: transparent red red transparent;
        }
        .pingx::after{
            content: '';
            display: block;
            width: 0;
            height: 0;
            top: 0;
            position: absolute;
            right: -30px;
            border-style: solid;
            border-width: 10px 10px;
            border-color: red transparent transparent red;
        }
複製程式碼

    <div>
        <div class="first">
            
        </div>
        <div class="second">


        </div>
        <div class="third">

        </div>
    </div>
    <div>
        <div class="fird">
            <div class="edg">
                 上海
            </div>
        </div>
    </div>
    <div>   
        <div class="pingx">
            21
        </div>
    </div>
複製程式碼