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

效果图:

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

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

  

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

 /* 正六边形 */
#hexagon {
width: 100px;
height: 55px;
background: #6376ff1f;
position: relative;
top: 25px;
} #hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 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;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #6376ff1f;
}

  

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

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

  

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

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

  

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

/* 心形 */
#heart {
height: 50px;
width: 50px;
background: #6376ff1f;
transform: rotate(45deg);
} #heart:before {
position: absolute;
content: "";
left: -25px;
top: 0px;
width: 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;
width: 50px;
height: 25px;
background: #6376ff1f;
border-radius: 50px 50px 0 0;
}

  

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

/* 六角星 */
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #6376ff1f;
position: relative;
}
#star-six:after {
width: 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;
}

  

CSS实现心形、六角星、六边形、平行四边形等几何的更多相关文章

  1. CSS3画五角星和六角星

    最终想要实现的效果 一.五角星 在画五角星之前首先分析这个五角星是如何实现,由哪几个部分构成的,示意图如下: 三个顶角向上的三角形,通过设置旋转和定位相互重叠和拼接实现最终的五角星效果. 为了语义化和 ...

  2. css实现心形图案

    用1个标签实现心形图案,show you the code; <!DOCTYPE html> <html lang="en"> <head> & ...

  3. CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  4. CSS奇思妙想图形(心形、气泡三角形、切角、梯形、饼图等)

    今天看到一篇不错文章,在原来CSS3图形创建基础上扩展了很多. 这里记录总结下 心形 原理:利用 圆形 和 正方形实现 HTML: <div class="heartShaped&qu ...

  5. CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

    转自:http://blog.csdn.net/chenhongwu666/article/details/38905803 CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆 ...

  6. [deviceone开发]-心形点赞动画示例

    一.简介 这个示例展示do_Animator组件的简单使用,通过点击"点赞"按钮,不断弹出心形图片,向上动画漂移到顶部消失.间隔时间和上下左右移动的步长都是一定范围的随机值.二.效 ...

  7. CSS3制作心形头像

    1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一 ...

  8. css3实现三角形,聊天背景气泡,心形等形状

    1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...

  9. 超多经典 canvas 实例,动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

随机推荐

  1. linux做免密登录,成功分发公钥后登录主机依旧需要输入密码的问题解决

    问题描述 在主机A上用ssh-keygen生成密钥对后,用ssh-copy-id命令将公钥成功copy到主机B上后,测试从A免密登录B,但是依旧需要输入主机B的密码后才能登录. 出现此错误的原因 如果 ...

  2. leetcode 198 House Robber I

    function rob(nums) { if(!nums || nums.length === 0) { return 0; } else if(nums.length < 2){ retur ...

  3. Anaconda多环境Python

    1. Create a new environment for 32bit Python 2.7: set CONDA_FORCE_32BIT=1 conda create -n py27_32 py ...

  4. 深度学习之numpy.poly1d()函数

    1.np.poly1d()此函数有两个参数: 参数1:为一个数组,若没有参数2,则生成一个多项式,例如: p = np.poly1d([2,3,5,7]) print(p)    ==>> ...

  5. maskrcnn实现.md

    mask rcnn学习 Mask R-CNN实现(https://engineering.matterport.com/splash-of-color-instance-segmentation-wi ...

  6. 环境配置 | Pycharm远程开发的环境配置

    目的:同局域网中的两台电脑,Mac上看视频学习编程 + 当服务器跑代码:Windows上使用Pycharm写代码.学习远程开发 (当前底子有限,很多操作可能存在理解偏差) Mac上代码存放路径:~/O ...

  7. JAVA变量声明在循环体内还是循环体外

    (1) for (int i = 0; i < 10000; ++i) { Object obj = new Object(); System.out.println("obj= &q ...

  8. Django_后台管理

    1. 站点管理 2. 创建超级管理员 3. 添加自己的数据模型 默认是打印字符串的 4. 个性化站点管理的定制 4.1 个性化规则 admin.py 4.2 布尔值定制显示 4.3 插入班级的时候同时 ...

  9. 【C语言】用指针作为形参完成数据的升序排列

    #include<stdio.h> void sort(int *x,int n); int main() { ] = { ,,,,,,,,, },i; sort(arr, ); prin ...

  10. GOM引擎脚本 时间段内调整人物属性

    功能: 调整人物属性 格式: ChangeHumAbility 属性(1-20) 操作符(+ = -) 效果(1-65535) 时间秒说明: 属性1-12分别对应人物 防御下限 防御上限 魔御下限 魔 ...