css三角形拼接多边形

Posted 2021-05-13 王多静

 

如图效果,两边是四个直角三角形定位拼接出来的

html:

 <div class="award">
            <div class="triangle">
                <span class="triangle1"></span>
                <span class="triangle2"></span>
            </div>
            <span class="award-content">北京示范平台<b class="award-dot">·</b>2020-2021</span>
            <div class="triangle">
                <span class="triangle3"></span>
                <span class="triangle4"></span>
            </div>
        </div>

css:

          .award-content{
                float: left;
                padding: 0 34px;
                line-height: 40px;
                height: 40px;
                background: #c42a22;
                color: #fff;
                font-size: 18px;
            }
            .award-dot{
                font-size: 22px;
                margin: 0 24px;
            }
            .triangle{
                float: left;
                position: relative;
                height: 40px;
            }
            .triangle4{
                position: absolute;
                left: 0;
                top: 0;
                width: 0;
                height: 0;
                border-top: 20px solid #c42a22;
                border-right: 20px solid transparent;
            }
            .triangle1{
                position: absolute;
                right: 0;
                top: 0;
                width: 0;
                height: 0;
                border-top: 20px solid #c42a22;
                border-left: 20px solid transparent;
            }
            .triangle3{
                position: absolute;
                left: 0;
                bottom: 0;
                width: 0;
                height: 0;
                border-bottom: 20px solid #c42a22;
                border-right: 20px solid transparent;
            }
            .triangle2{
                position: absolute;
                right: 0;
                bottom: 0;
                width: 0;
                height: 0;
                border-bottom: 20px solid #c42a22;
                border-left: 20px solid transparent;
            }