zoukankan      html  css  js  c++  java
  • 用纯Css作三角形

    <style>

    //向上三角形

    .triangle_up{

    0;

    height:0;

    border-left:30px solid transparent;

    border-right:30px solid transparent;

    border-bottom:30px solid red;

    }

    //向下三角形

    .triangle_up{

    0;

    height:0;

    border-left:30px solid transparent;

    border-right:30px solid transparent;

    border-top:30px solid red;

    }

    //向左三角形

    .triangle_up{

    0;

    height:0;

    border-top:30px solid transparent;

    border-bottom:30px solid transparent;

    border-right:30px solid red;

    }

    //向右三角形

    .triangle_up{

    0;

    height:0;

    border-top:30px solid transparent;

    border-bottom:30px solid transparent;

    border-left:30px solid red;

    }

    </style>

    <body>

    <div class="triangle_up"></div>

    <div class="triangle_down"></div>

    <div class="triangle_left"></div>

    <div class="triangle_right"></div>

    </body>

    综上所述:你所要的三角形朝向是跟代码所写是对立的。比如:朝上的三角形,你就得用border-bottom;朝左,你就得用border-right;如此。。。

  • 相关阅读:
    MySQL的操作
    Centos7下MySQL的安装
    一键安装Tomcat
    Hola!
    eval
    初级版笔记(修改中)
    decode前先encode(python)
    不能scanf字符串
    第一次做题的一些问题c++
    DSY3163*Eden的新背包问题
  • 原文地址:https://www.cnblogs.com/fkcqwq/p/5445405.html
Copyright © 2011-2022 走看看