码迷,mamicode.com
首页 > Web开发 > 详细

css三角形拼接多边形

时间:2021-05-24 08:09:51      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:content   lin   rgba   tran   image   效果   font   height   war   

技术图片

 

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

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;
            }

 

css三角形拼接多边形

标签:content   lin   rgba   tran   image   效果   font   height   war   

原文地址:https://www.cnblogs.com/wangduojing/p/14765764.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!