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%;
        }
      
    
  • 相关阅读:
    基于JWT用户认证方式(前后端分离)
    git推送时报错:hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing
    (fields.E210) Cannot use ImageField because Pillow is not installed....解决方法
    python3.6报错:AttributeError: 'str' object has no attribute 'decode'
    于在Python3.6.7 +Ubuntu16.04下安装channels报错
    docsify 搭建优雅项目文档
    SQLSERVER 系统表查询
    数据立方建立-如何实现一对多,多对多
    从BI分析角度,数据立方的建立方法
    MYSQL库内所有表名及表结构获取
  • 原文地址:https://www.cnblogs.com/ouyangkai/p/14041062.html
Copyright © 2011-2022 走看看