zoukankan      html  css  js  c++  java
  • css 三角实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>

    .duihua span.tp{
    border- 30px;
    border-style: solid;
    border-color:transparent transparent red transparent;
    left:40px;
    top: -60px;
    }
    .duihua span.bo{
    border- 30px;
    border-style: solid;
    border-color:transparent transparent #fff transparent;
    left:40px;
    top: -59px;
    }
    .duihua{
    300px;height:30px;border:1px solid red;
    position: relative;left:100px;top:200px;background: yellow
    }
    .duihua i{position: absolute; 0;height: 0;font-size: 0;}
    .duihua i.jiao{
    border- 16px 16px 16px 8px;
    border-style: solid;
    border-color: transparent transparent transparent red;
    left:300px;
    top: -1px;
    }
    .duihua i.jiaob{
    border- 16px 16px 16px 8px;
    border-style: solid;
    border-color: transparent transparent transparent yellow;
    left:299px;
    top: -1px;
    }
    </style>
    </head>
    <body>
    <div class="duihua">
    <span class="tp"></span>
    <span class="bo"></span>
    <i class="jiao"></i>
    <i class="jiaob"></i>
    </div>
    </body>
    </html>

  • 相关阅读:
    迪杰斯特拉(Dijkstra)算法描述及理解
    KMP初步
    网络流初步
    Cutting Codeforces Round #493 (Div. 2)
    优先队列小结
    树状数组初步理解
    分块思想
    树状数组-逆序对-HDU6318
    线段树
    8.12.5
  • 原文地址:https://www.cnblogs.com/zerohu/p/5368311.html
Copyright © 2011-2022 走看看