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>

     

  • 相关阅读:
    OpenCV2.4.4 图像旋转和缩放
    Python+OpenCV:图片无损旋转90°且无黑边的处理方法
    python 怎样去除图片中的多余物体
    goland 无法解析符号
    go mod init 报错
    比较有用的
    Gorm 学习笔记
    Gorm 更新 0 值
    Java Lambda 表达式,Java Lambda 函数接口
    Java 单例模式,Java Singleton单例模式
  • 原文地址:https://www.cnblogs.com/liuting1314521/p/6231943.html
Copyright © 2011-2022 走看看