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>

  • 相关阅读:
    85. Maximal Rectangle
    120. Triangle
    72. Edit Distance
    39. Combination Sum
    44. Wildcard Matching
    138. Copy List with Random Pointer
    91. Decode Ways
    142. Linked List Cycle II
    异或的性质及应用
    64. Minimum Path Sum
  • 原文地址:https://www.cnblogs.com/zerohu/p/5368311.html
Copyright © 2011-2022 走看看