The Shapes of CSS

All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser.

Square

 

 

Rectangle

 

 

Circle

 

 

Oval

 

 

Triangle Up

 

 

Triangle Down

 

 

Triangle Left

 

 

Triangle Right

 

 

Triangle Top Left

 

 

Triangle Top Right

 

 

Triangle Bottom Left

 

 

Triangle Bottom Right

 

 

Curved Tail Arrow via Ando Razafimandimby

 

 

Trapezoid

 

 

Parallelogram

 

 

Star (6-points)

 

 

Star (5-points) via Kit MacAllister

 

 

Pentagon

 

 

Hexagon

 

 

Octagon

 

 

 

Infinity via Nicolas Gallagher

 

 

Diamond Square via Joseph Silber

 

 

Diamond Shield via Joseph Silber

 

 

Diamond Narrow via Joseph Silber

 

 

Cut Diamond via Alexander Futekov

 

 

Egg

 

 

Pac-Man

 

 

Talk Bubble

 

 

12 Point Burst via Alan Johnson

 

 

8 Point Burst via Alan Johnson

 

 

Yin Yang via Alexander Futekov

 

 

Badge Ribbon via Catalin Rosu

 

 

Space Invader via Vlad Zinculescu

 

 

TV Screen

 

 

Chevron via Anthony Ticknor

 

 

Magnifying Glass

 

 

Facebook Icon via Nathan Swartz

 

 

 

Flag via Zoe Rooney

 

 

 

 

引：https://css-tricks.com/examples/ShapesOfCSS/

CSS图形形状大全的更多相关文章

  1. CSS样式整理大全

    转载自:http://www.cnblogs.com/laihuayan/archive/2012/07/27/2611111.html 字体属性:(font) 大小 {font-size: x-la ...

  2. 奇妙的 CSS shapes(CSS图形)

    CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outsid ...

  3. 奇妙的 CSS shapes(CSS图形) 【css 图形，绘图，CSS 几何图形)】

    http://www.cnblogs.com/coco1s/p/6992177.html <!DOCTYPE html> <html> <head> <met ...

  4. 利用噪声构建美妙的 CSS 图形

    在平时,我非常喜欢利用 CSS 去构建一些有意思的图形. 我们首先来看一个简单的例子.首先,假设我们实现一个 10x10 的格子: 此时,我们可以利用一些随机效果,优化这个图案.譬如,我们给它随机添加 ...

  5. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  6. 【2016年特别福利】史上最全CSS学习资料大全

    css学习篇 [2016年特别福利]史上最全CSS学习资料大全

  7. CSS颜色代码大全

    CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...

  8. 美丽的CSS图形和HTML5

    1.HTML5基础 文档类型 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "htt ...

  9. HTML标签的命名/CSS标准化命名大全

    在一个内容较多的HTML页面中,需要设计许多不同的框架,再为这些不同的框架及内容进行分类,给予相应的名称,从而使得网页结构更加清晰,也为工作提供了方便.许多新手朋友在设计一个HTML文件时,可能只会依 ...

随机推荐

  1. 在ubuntu 上创建 ssl 证书

    soap webservice 调试工具: soap UI, 可以下载下来玩一玩. Introduction TLS, or transport layer security, and its pre ...

  2. 【矩阵压缩】 poj 1050

    题意:给一个矩阵,里面有正负数,求子矩阵和的最大值 #include <iostream> #include <cstdio> #include <stdlib.h> ...

  3. 解决adb command not found以及sdk环境配置

    解决adb command not found以及sdk环境配置 分类: mark 2013-10-02 09:41 2975人阅读 评论(0) 收藏 举报 原文地址:http://www.cnblo ...

  4. memory runs at single channel问题解决

    memory runs at single channel 解决方案:开机后按DEL ,然后进入BIOS 选择第一项,回车! advanced下面的有个momori什么什么的,选择disable. m ...

  5. 比较好的前端方法库及一些vue如何引入静态文件

    https://select2.github.io/examples.html   select2 自动搜索带select选择 ## 表单提交 https://github.com/marioizqu ...

  6. Android网络开发之OkHttp--基本用法实例化各个对象

    1.实例化OkHttpClient对象,OkHttpClient包含了以下属性,以及set()和get()方法.但并没有包含具体的执行方法,详情见源码. //实例化OkHttpClent对象 priv ...

  7. PAT 天梯赛 L2-005 集合相似度

    set的应用 题目链接 题解 有点像集合的交并操作,直接利用set进行处理,因为set有去重的功能,而且set是利用红黑树实现的,查找速度快O(logN). 代码如下: #include<cst ...

  8. form2js的使用（续BootstrapTable）

    通过收集表单数据,并且转换为json格式,实现表格的查询. 引入插件:不要忘记引入jquery. <script src="${ctx}/assets/plugins/form2js/ ...

  9. php中__clone() shallow copy 只是浅复制

    什么是浅复制呢? 简单一点,就是说复制一个对象的时候,如果对象$Obj的一个属性的类型是引用类型的,比如 $person这个属性,指向的是一个 叫做 $objPerson的一个引用, 那么复制$Obj ...

  10. [ERROR] InnoDB: Cannot allocate memory for the buffer pool

    :: mysqld_safe Starting mysqld daemon with databases from /data/mysqldb -- :: [Note] /usr/local/mysq ...