zoukankan      html  css  js  c++  java
  • 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;
    }

     

  • 相关阅读:
    java中继承和多态的理解
    汽车租赁系统
    s2第六章继承和多态
    第三章泛型集合ArrayList 和Hashtable
    第二章项目总结
    s2第二章深入c#类型
    .NET平台
    航班查询系统
    java初始重点语法
    JDBC
  • 原文地址:https://www.cnblogs.com/baojiao/p/9941400.html
Copyright © 2011-2022 走看看