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

      

  • 相关阅读:
    如何使用腾讯位置服务地图选点组件?
    vue使用腾讯位置服务获取当前位置示例
    腾讯位置服务地址搜索&marker标记demo
    如何优雅接入腾讯地图SDK公交路线规划2?
    如何优雅接入腾讯地图SDK公交路线规划?
    地图SDK自定义路况和字体示例
    腾讯地图SDK自定义地图和路况示例
    手把手教你实现3D地图的定时高亮和点击事件
    vue实现坐标拾取器功能demo
    jmeter之安装ant
  • 原文地址:https://www.cnblogs.com/giserjobs/p/12018372.html
Copyright © 2020-2023  润新知