用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>
复制代码