1.矩形
绘制矩形应该是最简单的了，直接设置div的宽和高，填充颜色，效果就出来了。

2.圆角矩形
绘制圆角矩形也很简单，在1的基础上，在使用css3的border-radius，即可。

3.圆
根据圆的特性，在2的基础上，设置div的宽和高一直，为正方形，然后设置border-radius为50%即可。

4.椭圆
椭圆也很简单了，只需要在3的基础上，让div的宽和高不一致即可。为了更好看，建议宽设置为高的1.5倍。

5.三角形
三角形相对其他来说，就有点难了。这里我们要用到border-style属性在配合分别设置四个边的border的宽度来实现。最终效果见下面的代码。

6.弧
本质上是利用圆角来实现，现在需要把矩形的左上角的圆角绘制成弧形，那么把右边和底边border的宽度设成0px，让他们不可见，设置左上角圆角的半径，让其变大，看得明显些，其余的圆角半径全都设成0px，这样一个弧形就完成了。

7.平行四边形

平行四边形是在矩形的基础上运用了一个CSS3的transform属性。使用了变形效果。

8.六角星
六角星是使用了一个“:after”制作了另一个反方向的三角形，在定位层叠到一起，从而形成六角星，说白一点就是两个三角拼在一起变成了六角星。

9.五角星
五角星主要也是使用了CSS3的transform属性，并配合“:after”来使用。

10.心形、阴阳图、Point Burst、仿微信消息框、Pac-Man等就不一一举例了，大家直接看代码。

DEMO地址：http://codepen.io/jonechen/pen/mPgYYQ

详解使用CSS3绘制矩形、圆角矩形、圆形、椭圆形、三角形、弧的更多相关文章

  1. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  2. [javascript svg fill stroke stroke-width x y rect rx ry 属性讲解] svg fill stroke stroke-width rect 绘制具有圆角矩形属性讲解

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  3. 聊天气泡的绘制（圆角矩形+三角形+黑色边框，关键学会QPainter的draw函数就行了），注意每个QLabel都有自己的独立坐标

    头文件: #ifndef GLABEL_H #define GLABEL_H #include <QLabel> #include <QPainter> #include &l ...

  4. 详解用OpenCV绘制各类几何图形

    摘要:本文详细介绍了OpenCV绘制几何图形的方法,利用cv2.line().v2.circle().cv2.rectangle().cv2.ellipse().cv2.polylines().cv2 ...

  5. Android中绘制圆角矩形图片及任意形状图片

    圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,因为它避开了直角的生硬,带来更好的用户体验,下面是几个设计的例子: 下面在Android中实现将普通的矩形图片绘制成圆角 ...

  6. canva绘制圆角矩形

    在做组态的时候,需要支持矩形圆角格式,但是因为canvas本身不带有圆角矩形,需要自行算出坐标进行绘制 方案一.统一圆角 <!DOCTYPE html> <html> < ...

  7. 圆角矩形shader

    在游戏中,有时需要对一张矩形图片进行切割,绘制成圆角矩形. circelrect.vert attribute vec4 a_position; attribute vec4 a_normal; at ...

  8. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  9. Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

随机推荐

  1. Largest palindrome product

    A palindromic number reads the same both ways. The largest palindrome made from the product of two 2 ...

  2. MIPS平台移植apache 2.2.7

    参考文章: http://wenku.baidu.com/view/94e08a20a5e9856a561260e2.html http://httpd.apache.org/docs/2.4/ins ...

  3. 使用eclipse与jLink V8调试exynos 4412 u-boot

    /** ****************************************************************************** * @author    Maox ...

  4. MariaDB之基于Percona Xtrabackup备份大数据库[完整备份与增量备份]

    MariaDB之基于Percona Xtrabackup备份大数据库[完整备份与增量备份] 1.Xtrabackup的安装 percona-xtrabackup-2.2.3-4982.el6.x86_ ...

  5. linux下vi的复制，黏贴，删除，撤销，跳转等命令

    前言     在嵌入式linux开发中,进行需要修改一下配置文件之类的,必须使用vi,因此,熟悉 vi 的一些基本操作,有助于提高工作效率. 一,模式vi编辑器有3种模式:命令模式.输入模式.末行模式 ...

  6. Target Operator ID has No Access to Upgrade

    If you are attempting to migrate a project between environments through application designer you mig ...

  7. 三个有用的SQL辅助工具

    三个有用的SQL辅助工具 编写人:CC阿爸 2015-1-23 工欲善其事必先利其器,今天在这里,我想与大家一起分享三个有用的SQL辅助工具.有兴趣的同学,可以一同探讨与学习一下,否则就略过吧. 相信 ...

  8. [转]SQLServer 2008以上误操作数据库恢复方法——日志尾部备份

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/8491327 问题: 经常看到有人误删数据,或者误操作,特别是update和delete的 ...

  9. LPHW-积累-ex1-6

    Learn Python The Hard Way  ex0  介绍了各个操作系统下python的安装:强调了初学者最好使用简单的编辑器,不要使用IDE环境 ex1 使用 print 输出简单的字符串 ...

  10. ORACLE-用户常用数据字典的查询使用方法

    一.用户 查看当前用户的缺省表空间 SQL> select username,default_tablespace from user_users; USERNAME DEFAULT_TABLE ...