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>

     

  • 相关阅读:
    SVN的具体使用方法介绍(安装以及操作)
    谈谈敏捷开发
    008.MVC与数据库的交互
    001.MVC基本概述
    WebApi接口测试工具
    014.存储过程(sql实例)
    我们为什么需要DTO(数据传输对象)
    ASP.NET使用WebApi接口实现与Android客户端的交互(图片或字符串的接收与回传)
    面试题库[2]
    关于单例模式getInstance()的使用
  • 原文地址:https://www.cnblogs.com/liuting1314521/p/6231943.html
Copyright © 2011-2022 走看看