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;
    }

     

  • 相关阅读:
    准备工作
    案例分析
    阅读任务
    准备工作
    案例分析作业
    情 202103226-1 编程作业
    阅读任务
    准备工作
    4 20210412-1 原型设计作业
    3 20210405-1 案例分析作业
  • 原文地址:https://www.cnblogs.com/baojiao/p/9941400.html
Copyright © 2011-2022 走看看