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>

     

  • 相关阅读:
    hadoop集群管理之 SecondaryNameNode和NameNode
    无法fsck问题解决
    处世
    [THUSC2016]成绩单
    Python安装官方whl包、tar.gz包、zip包
    poj1159 Palindrome 动态规划
    hoj1249 Optimal Array Multiplication Sequence 矩阵链乘
    hoj分类(转)
    hoj 2012 winter training Graph Day1 106 miles to Chicago图论最短路dijkstra算法
    poj1050 To the Max
  • 原文地址:https://www.cnblogs.com/liuting1314521/p/6231943.html
Copyright © 2011-2022 走看看