zoukankan      html  css  js  c++  java
  • CSS--实现小三角形

    <style>

      html, body {
        margin: 0;
        padding: 0;
      }


      /*下面用CSS3分别实现向上、下、左、右的三角形*/

      .btn-color{
        color: #622CB9;
      }

      /*箭头向上*/

      .arrow-up {
        0;
        height:0;
        border-left:100px solid transparent;
        border-right:100px solid transparent;
        border-bottom:100px solid #089EF1;
      }

      /*箭头向右*/

      .arrow-right {
        0;
        height:0;
        border-top:100px solid transparent;
        border-bottom: 100px solid transparent;
        border-left: 100px solid green;
      }

      /*箭头向下*/

      .arrow-down {
        0;
        height:0;
        border-left:100px solid transparent;
        border-right:100px solid transparent;
        border-top:100px solid #F8071D;
      }

      /*箭头向左*/

      .arrow-left {
        0;
        height:0;
        border-top:100px solid transparent;
        border-bottom:100px solid transparent;
        border-right:100px solid #F804EF;
      }

      

      /*箭头直角左上角*/

      .r-angle-left-up{
        0;
        height:0;
        border-bottom: 200px solid transparent;
        border-left: 200px solid #0F05FC;
      }

      
    /*箭头直角右上角*/

      .r-angle-right-up{
        0;
        height:0;
        border-bottom:200px solid transparent;
        border-right: 200px solid #622CB9;
      }

      /*箭头直角右下角*/

      .r-angle-right-down{
        0;
        height:0;
        border-top:200px solid transparent;
        border-right:200px solid #008051;
      }

      
    /*箭头直角左下角*/

      .r-angle-left-down{
        0;
        height:0;
        border-top:200px solid transparent;
        border-left: 200px solid #B35708;
      }

    </style>

    <body>

      <!--等腰三角-->

      <div class="arrow-up btn-color"><!--向上的三角--></div>

      <div class="arrow-right btn-color"><!--向右的三角--></div>

      <div class="arrow-down btn-color"><!--向下的三角--></div>

      <div class="arrow-left btn-color"><!--向左的三角--></div>

      <!--直角三角-->

      <div class="r-angle-left-up btn-color"><!--左上角的直角三角--></div>

      <div class="r-angle-right-up btn-color"><!--右上角的直角三角--></div>

      <div class="r-angle-right-down btn-color"><!--右下角的直角三角--></div>

      <div class="r-angle-left-down btn-color"><!--左下角的直角三角--></div>

    </body>

     

  • 相关阅读:
    list浅析
    C#尝试读取或写入受保护的内存。这通常指示其他内存已损坏(catch不起作用)
    浅析C#线程同步事件-WaitHandle
    C#操作xml方法1
    C#简单的操作csv文件
    C#的int类型?,??,~的意思,string类型空值赋值
    将多个exc表格汇总于一个表格中
    C#禁止双击标题栏等操作
    c#泛型
    c#session
  • 原文地址:https://www.cnblogs.com/liuting1314521/p/6231943.html
Copyright © 2011-2022 走看看