zoukankan      html  css  js  c++  java
  • css三角形拼接多边形

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

    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;
                }
  • 相关阅读:
    总结PLSQL的快捷键以及使用技巧
    WebStorm 常用快捷键
    bootStrap小结3
    bootStrap小结2
    bootStrap小结1
    DataTable操作
    2017春 前端自动化(一)构建工具的搭建
    前端自动化之(一)—浏览器自动实时刷新
    基于div表单模拟右对齐
    纯css去实现loading动画效果图
  • 原文地址:https://www.cnblogs.com/wangduojing/p/14765764.html
Copyright © 2011-2022 走看看