• CSS实现心形、六角星、六边形、平行四边形等几何


    本文将利用border属性实现简单几何的绘制;

    效果图:

    正八角星
    说明:采用两个正方形以中心进行旋转叠加;

    /* 八角星 */
        #burst-8 {
            background: #6376ff1f;
             80px;
            height: 80px;
            position: relative;
            text-align: center;
            transform: rotate(20deg);
        }
    
        #burst-8:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 80px;
             80px;
            background: #6376ff1f;
            transform: rotate(135deg);
        }
    

      

    正六边形
    说明:将长方形,与两个三角形拼接;

     /* 正六边形 */
        #hexagon {
             100px;
            height: 55px;
            background: #6376ff1f;
            position: relative;
            top: 25px;
        }
    
        #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 #6376ff1f;
        }
    
        #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 #6376ff1f;
        }
    

      

    平行四边形
    说明:采用矩形skew倾斜的方式;

    #ping {
            height: 50px;
             100px;
            transform: skew(20deg);
            background: #6376ff1f;
        }
    

      

    椭圆
    说明:采用矩形border-radius的方式;

    #tuoyuan {
            height: 50px;
             100px;
            border-radius: 50%;
            background: #6376ff1f;
        }
    

      

    心形
    说明:将正方形旋转45度,与两个直径和其半径相同的半圆进行旋转、平移、拼接

    /* 心形 */
        #heart {
            height: 50px;
             50px;
            background: #6376ff1f;
            transform: rotate(45deg);
        }
    
        #heart:before {
            position: absolute;
            content: "";
            left: -25px;
            top: 0px;
             50px;
            height: 25px;
            transform: rotate(-90deg);
            background: #6376ff1f;
            transform-origin: bottom;
            border-radius: 50px 50px 0 0;
        }
    
        #heart:after {
            position: absolute;
            content: "";
            left: 0px;
            top: -25px;
             50px;
            height: 25px;
            background: #6376ff1f;
            border-radius: 50px 50px 0 0;
        }
    

      

    六角星
    说明:采用两个等腰三角形进行叠加;

    /* 六角星 */
        #star-six {
             0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid #6376ff1f;
            position: relative;
        }
        #star-six:after {
             0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 100px solid #6376ff1f;
            position: absolute;
            content: "";
            top: 30px;
            left: -50px;
        }
    

      

  • 相关阅读:
    node.js入门(二) 第一个程序 Hello World
    node.js 入门(一)安装
    Windows平台字符的存储和输出分析
    设定MS SQL Server 2008定期自动备份
    OpenCV学习笔记(一)安装及运行第一个OpenCV程序
    Emgu学习笔记(一)安装及运行Sample
    vue脚手架 build-config文件夹(跨域/打包)相关配置
    fetch下载文件--统一拦截导出文件(含JAVA)
    git 避免重复输入密码
    form serialize获取不到上传文件数据解决办法
  • 原文地址:https://www.cnblogs.com/giserjobs/p/12018372.html
Copyright © 2020-2023  润新知