zoukankan      html  css  js  c++  java
  • div盒子形状

    正方形

        #square {
           100px;
          height: 100px;
          background: red;
        }
      
    

    长方形

        #rectangle {
           200px;
          height: 100px;
          background: red;
        }
      
    

    圆形

       #circle {
           100px;
          height: 100px;
          background: red;
          border-radius: 50%
        }
    

    椭圆形

        #oval {
           200px;
          height: 100px;
          background: red;
          border-radius: 100px / 50px;
        }
      
    

    三角形

        #triangle-up {
           0;
          height: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-bottom: 100px solid red;
        }
      
    
        #triangle-down {
           0;
          height: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-top: 100px solid red;
        }
      
    

    Left 三角形

        #triangle-left {
           0;
          height: 0;
          border-top: 50px solid transparent;
          border-right: 100px solid red;
          border-bottom: 50px solid transparent;
        }
      
    

    Right

        #triangle-right {
           0;
          height: 0;
          border-top: 50px solid transparent;
          border-left: 100px solid red;
          border-bottom: 50px solid transparent;
        }
      
    

    Top Left

        #triangle-topleft {
           0;
          height: 0;
          border-top: 100px solid red;
          border-right: 100px solid transparent;
        }
      
    

    Top Right

        #triangle-topright {
           0;
          height: 0;
          border-top: 100px solid red;
          border-left: 100px solid transparent;
        }
      
    

    Bottom Left

        #triangle-bottomleft {
           0;
          height: 0;
          border-bottom: 100px solid red;
          border-right: 100px solid transparent;
        }
      
    

    Bottom Right

        #triangle-bottomright {
           0;
          height: 0;
          border-bottom: 100px solid red;
          border-left: 100px solid transparent;
        }
      
    

    5角星

        #star-five {
          margin: 50px 0;
          position: relative;
          display: block;
          color: red;
           0px;
          height: 0px;
          border-right: 100px solid transparent;
          border-bottom: 70px solid red;
          border-left: 100px solid transparent;
          transform: rotate(35deg);
        }
        #star-five:before {
          border-bottom: 80px solid red;
          border-left: 30px solid transparent;
          border-right: 30px solid transparent;
          position: absolute;
          height: 0;
           0;
          top: -45px;
          left: -65px;
          display: block;
          content: '';
          transform: rotate(-35deg);
        }
        #star-five:after {
          position: absolute;
          display: block;
          color: red;
          top: 3px;
          left: -105px;
           0px;
          height: 0px;
          border-right: 100px solid transparent;
          border-bottom: 70px solid red;
          border-left: 100px solid transparent;
          transform: rotate(-70deg);
          content: '';
        }
      
    

    六角形

        #hexagon {
           100px;
          height: 55px;
          background: red;
          position: relative;
        }
        #hexagon:before {
          content: "";
          position: absolute;
          top: -25px;
          left: 0;
           0;
          height: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-bottom: 25px solid red;
        }
        #hexagon:after {
          content: "";
          position: absolute;
          bottom: -25px;
          left: 0;
           0;
          height: 0;
          border-left: 50px solid transparent;
          border-right: 50px solid transparent;
          border-top: 25px solid red;
        }
      
    

    八角形

        #octagon {
           100px;
          height: 100px;
          background: red;
          position: relative;
        }
        #octagon:before {
          content: "";
           100px;
          height: 0;
          position: absolute;
          top: 0;
          left: 0;
          border-bottom: 29px solid red;
          border-left: 29px solid #eee;
          border-right: 29px solid #eee;
        }
        #octagon:after {
          content: "";
           100px;
          height: 0;
          position: absolute;
          bottom: 0;
          left: 0;
          border-top: 29px solid red;
          border-left: 29px solid #eee;
          border-right: 29px solid #eee;
        }
      
    

    心型

        #heart {
          position: relative;
           100px;
          height: 90px;
        }
        #heart:before,
        #heart:after {
          position: absolute;
          content: "";
          left: 50px;
          top: 0;
           50px;
          height: 80px;
          background: red;
          border-radius: 50px 50px 0 0;
          transform: rotate(-45deg);
          transform-origin: 0 100%;
        }
        #heart:after {
          left: 0;
          transform: rotate(45deg);
          transform-origin: 100% 100%;
        }
      
    
  • 相关阅读:
    Zend框架2入门(二) (转)
    Zend框架2入门(一) (转)
    PHP Strict standards:Declaration of … should be compatible with that of…(转)
    ::符号
    mysql查询今天,昨天,近7天,近30天,本月,上一月数据的方法(转)
    php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法(转)
    PHP5.4新特性(转)
    PHP5.4的变化关注---What has changed in PHP 5.4.x(转)
    关于PHP的curl开启问题 (转)
    安装apache重启的时候,报错端口被占用,错误1
  • 原文地址:https://www.cnblogs.com/ouyangkai/p/14041062.html
Copyright © 2011-2022 走看看