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

 

CSS画图的更多相关文章

  1. 基于单个 div 的 CSS 画图

    原文: Single Div Drawings with CSS 译文: 基于单个 div 的 CSS 画图 译者: 前端外刊评论 译注:通读本文,强烈地感受到了技术与艺术的结合.赞作者的这句话:Re ...

  2. css画图那些事

    上一篇css3写了一些基本的图形,想到是不是能用css3画个动物,便在网上找图片.于是选中一只大鹏鸟 也不难,一步步的写出身体部位,再定位上去就好了.来一张效果图,后面给两个加了动画,稍微难看一点,后 ...

  3. 使用CSS画图之三角形(一)

    简单的画一个三角形,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. 纯css来画图-border应用

    基础知识: Css画图大部分是使用了css中的border来绘画图形,那首先我们就来看下border的基础知识,至于其他的遇到了再讲吧! Border的基础知识: 一般我们这样简写: border: ...

  5. CSS画出的图

    // × 目录 [1]矩形 [2]圆形 [3]椭圆[4]直角三角形[5]正三角形[6]平行四边形[7]梯形[8]六角星[9]六边形[10]五角星 简单图形 矩形 div{ width: 100px; ...

  6. CSS与JQuery的相关问题

    文字隐藏:p div里面的文字过长时隐藏文字: overflow:hidden; text-overflow:ellipsis; white-space:nowrap; --------------- ...

  7. canvas 在线画图

    canvas 在线画图 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  8. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  9. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

随机推荐

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. UE4新手之编程指南

    虚幻引擎4为程序员提供了两套工具集,可共同使用来加速开发的工作流程. 新的游戏类.Slate和Canvas用户接口元素以及编辑器功能可以使用C++语言来编写,并且在使用Visual Studio 或 ...

  3. Golang， 以17个简短代码片段，切底弄懂 channel 基础

    (原创出处为本博客:http://www.cnblogs.com/linguanh/) 前序: 因为打算自己搞个基于Golang的IM服务器,所以复习了下之前一直没怎么使用的协程.管道等高并发编程知识 ...

  4. 深入Java虚拟机--判断对象存活状态

    程序计数器,虚拟机栈和本地方法栈 首先我们先来看下垃圾回收中不会管理到的内存区域,在Java虚拟机的运行时数据区我们可以看到,程序计数器,虚拟机栈,本地方法栈这三个地方是比较特别的.这个三个部分的特点 ...

  5. Kotlin类：功能更强、而更简洁（KAD 03）

    作者:Antonio Leiva 时间:Dec 7, 2016 原文链接:http://antonioleiva.com/classes-kotlin/ Kotlin类尽可能简单,这样用较少的代码完成 ...

  6. django 第三天 有关库使用

    项目中经常会用到第三方的lib和app,有些lib和app会进行不断更新,更新后可能会存在冲突,因此可以创建externals目录,下面欧app和libs.app存放django-cms,haysta ...

  7. BZOJ 1391: [Ceoi2008]order [最小割]

    1391: [Ceoi2008]order Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1509  Solved: 460[Submit][Statu ...

  8. ubuntu15 coreclr

    看了很多文章心里痒痒,也下载个ubuntu想发布个asp.net5试试,自然是下载的最新版本15.结果涉及dnu restore,dnx...什么的都没反应,切换为mono就正常,奇怪了,按说core ...

  9. css 垂直水平居中总结

    一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...

  10. 全面解析ASP.NET MVC模块化架构方案

    什么叫架构?揭开架构神秘的面纱,无非就是:分层+模块化.任意复杂的架构,你也会发现架构师也就做了这两件事. 本文将会全面的介绍我们团队在模块化设计方面取得的经验.之所以加了“全面”二字,是因为本文的内 ...