• CSS3:不可思议的border属性


    在CSS中,其border属性有很多的规则。对于一些事物,例如三角形或者其它的图像,我们仍然使用图片代替。但是现在就不需要了,我们可以用CSS形成一些基本图形,我分享了一些关于这方面的技巧。

    1、正三角形:

    .triangle_up
    {
      height:0px; 0px;
      border-bottom:50px solid #006633;
      border-left:50px solid transparent;
      border-right:50px solid transparent;
    }

    2、倒三角形:

    .triangle_down
    {
      height:0px; 0px;
      border-top:50px solid #006633;
      border-left:50px solid transparent;
      border-right:50px solid transparent;
    }

    3、左三角形

    .triangle_left
    {
      height:0px; 0px;
      border-left:50px solid #006633;
      border-top:50px solid transparent;
      border-bottom:50px solid transparent;
      float:left;
    }  

    4、右三角形

    .triangle_right
    {
      height:0px; 0px; float:left;
      border-right:50px solid #006633;
      border-top:50px solid transparent;
      border-bottom:50px solid transparent;
    }

    5、十字街效果

    .crossSquare
    {
      height:0px; 0px;
      border-right:50px solid blue;
      border-top:50px solid gray;
      border-bottom:50px solid red;
      border-left:50px solid yellow;
    }

     

  • 相关阅读:
    html+css动态篇
    html+css定位篇
    首页的css
    display详细说明
    html+css 布局篇
    html+css杂记
    JS与ES的关系
    H5本地存储
    JavaScript面向对象
    JavaScript执行上下文
  • 原文地址:https://www.cnblogs.com/baojiao/p/9941400.html
Copyright © 2020-2023  润新知