zoukankan      html  css  js  c++  java
  • caret彻底的理解css的三角形【通过border】

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .caret0{
                width:0;
                height:0;
                border: 5px solid #000;
            }
            .caret1{
                width:0;
                height:0;
                border-top: 5px solid #000;
                border-left: 5px solid #fff;
                border-right: 5px solid #fff;
                border-bottom: 5px solid #000;
            }
            .caret2{
                width:0;
                height:0;
                border-top: 5px solid #fff;
                border-left: 5px solid #f00;
                border-right: 5px solid #f00;
                border-bottom: 5px solid #fff;
            }
            .caret2{
                width:0;
                height:0;
                border-top: 5px solid #fff;
                border-left: 5px solid #f00;
                border-right: 5px solid #f00;
                border-bottom: 5px solid #fff;
            }
            .caret3{
                width:0px;
                height: 0px;
                border-bottom: 5px solid #000;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
            }
            .caret4{
                width:0px;
                height: 0px;
                border-right: 5px solid #000;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
            }
            .caret5{
                width:0px;
                height: 0px;
                border-top: 5px solid #000;
                border-left: 5px solid transparent;
                border-right: 5px solid transparent;
            }
            .caret6{
                width:0px;
                height: 0px;
                border-left: 5px solid #000;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
            }
        </style>
    </head>
    <body>
    <h1>通过border的设置的三角形</h1>
    <div class="caret0"></div>
    <div class="caret1"></div>
    <br>
    <div class="caret0"></div>
    <br>
    <div class="caret1"></div>
    <br>
    <div class="caret2"></div>
    <br>
    向上的三角形
    <div class="caret3"></div>
    <br>
    向左的三角形
    <div class="caret4"></div>
    <br>
    向下的三角形
    <div class="caret5"></div>
    <br>
    向右的三角形
    <div class="caret6"></div>
    </body>
    </html>
  • 相关阅读:
    Django基础二之URL路由系统
    Django基础一之web框架的本质
    HTTP协议超级详解
    动态规划-背包问题
    java 中对象比较大小
    排序算法
    泛型
    打jar包和使用jar包
    Mongodb中Sharding集群
    linux时间同步,ntpd、ntpdate
  • 原文地址:https://www.cnblogs.com/lee90/p/5809313.html
Copyright © 2011-2022 走看看