1.正方形

.div {width: 100px;height: 100px;background: red;}
2.矩形

.div {width: 200px;height: 100px;background: red;}
 3.圆形

.div {width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;} 
4.椭圆

.div {width: 200px;height: 100px;background: red;-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;border-radius: 100px / 50px;} 
5.上三角

.div {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;} 
6.下三角

.div {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}
7.左三角

.div {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}
8.右三角

.div {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}
9.三角形左上

.div {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;} 
10.三角形右上

.div {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}
11.三角形左下

.div {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;} 
12.三角形右下

.div {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;} 
13.弯尾箭头

.div { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg);}
.div:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0;top: -12px; left: -9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);} 
14.梯形

.div {border-bottom: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;height: 0;width: 100px;}
15.平行四边形

.div {width: 150px;height: 100px;-webkit-transform: skew(20deg);-moz-transform: skew(20deg);-o-transform: skew(20deg);background: red;}
16.六角星 
 
.div {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative;}
.div:after {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;position: absolute;content: "";top: 30px;left: -50px;}
17.五角星

.div { margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; -moz-transform: rotate(35deg);-webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform:rotate(35deg);}
.div:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px;left: -65px;display: block;content: ''; -webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg); -ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);}
.div:after { position: absolute; display: block; color: red; top: 3px; left: -105px;width: 0px;height: 0px;border-right:100px solid transparent; border-bottom:70px solid red;border-left: 100px solid transparent;-webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg);-o-transform: rotate(-70deg);content: '';}
18,桃心

.div {position: relative;width: 100px;height: 90px;}
.div:before,#heart:after { position: absolute;content: ""; left: 50px;top: 0;width: 50px;height: 80px;background: red; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);transform: rotate(-45deg); -webkit-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%;}
.div:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%;-moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%;}
19.无限符号

.div {position: relative; width: 212px; height: 100px;}
.div:before,.div:after {content: ""; position: absolute; top: 0; left: 0; width: 60px;height: 60px;border: 20px solid red; -moz-border-radius: 50px 50px 0 50px;border-radius: 50px 50px 0 50px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg); -o-transform: rotate(-45deg);transform: rotate(-45deg);}
.div:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0;border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
20.气泡聊天

.div {width: 120px; height: 80px;background: red;position: relative;-moz-border-radius:10px; -webkit-border-radius: 10px;border-radius: 10px;}
.div:before {content:"";position: absolute;right: 100%;top: 26px;width: 0; height: 0;border-top: 13px solid transparent; border-right: 26px solid red;border-bottom: 13px solid transparent;}
21.搜索符号

.div{ font-size: 10em; /* This controls the size. */ display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em;}
.div::before{ content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: red; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg);}
22.锥形

.div {width: 0;height: 0;border-left: 70px solid transparent;border-right: 70px solid transparent;border-top: 100px solid red; -moz-border-radius: 50%; -webkit-border-radius: 50%;border-radius: 50%;} 
23.月亮

.div { width: 80px;height: 80px;border-radius: 50%;box-shadow: 15px 15px 0 0 red;}
24.十字架

.div {background: red;height: 100px;position: relative;width: 20px;}
.div:after { background: red;content: "";height: 20px;left: -40px;position: absolute;top:40px;width: 100px;}

div+css实现各种形状(精心整理)的更多相关文章

  1. DIV+CSS 常见问题及解决办法整理

    http://blog.shaogroup.com/divcss-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E5% ...

  2. CSS精心整理的面试题

    CSS精心整理的面试题 1.设置边框的样式用border-style实现,设置边框的颜色用border-color实现 2.CSS的语法由选择器.属性.值三部分组成 3.设置一个div的最小宽度为50 ...

  3. 新入门的小白,整理一下特别简单实用的div+css兼容性的问题。

    最近整理了一下特别简单的div+css的不同浏览器的兼容性的问题,跟大家分享一下,只适合刚入门的新手,欢迎大牛们给提出意见. 1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: * ...

  4. div+css通用兼容性代码整理

    一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} <style> *html{padding:0px} /* Clear Fix */ .cl ...

  5. DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

    推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...

  6. 项目实战之玩转div+css制作自己定义形状

    项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  7. DIV+CSS+JS基础+正则表达式

    ...............HTML系列....................        DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素.DIV的起始 ...

  8. div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行   ...

  9. DIV+CSS系统学习:转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

随机推荐

  1. 纸上谈兵:哈希表(hash table)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! HASH 哈希表(hash table)是从一个集合A到另一个集合B的映射(map ...

  2. Reactjs 入门基础(三)

    State 和 Props以下实例演示了如何在应用中组合使用 state 和 props .我们可以在父组件中设置 state, 并通过在子组件上使用 props 将其传递到子组件上.在 render ...

  3. 在where条件中使用CASE WHEN 语句

    CREATE TABLE TB_Test_Report ( id int identity, stateid int, userid int, username ) ) go ,,'a') ,,'b' ...

  4. PHP echo 即时输出

    header(“Content-type:text/html;charset=utf-8″); #设置执行时间不限时 set_time_limit(0); #清除并关闭缓冲,输出到浏览器之前使用这个函 ...

  5. 使用SftpDrive+SourceInsight阅读开源代码

    在虚拟机环境下使用Linux编写和阅读代码,我之前一直是通过Xshell利用ssh登录至虚拟机从而在命令行下使用vim来进行的.目前有阅读开源代码的需要,虽然vim+ctags+cscope可以完成这 ...

  6. Echarts data数据为空时,显示“-”

    { name:'2007', type:'bar', data:["","",""]} 解决办法: 写成data:["" ...

  7. spark textFile 困惑与解释

    在编写spark测试应用时, 会用到sc.textFile(path, partition) 当配置为spark分布式集群时,当你读取本地文件作为输入时, 需要将文件存放在每台work节点上. 这时会 ...

  8. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  9. Python-实现对表插入百万条数据

    新手小白写的,我自己都不知道对不对,先写下来记着,以后掌握更多Python知识后,再来看下写的对不对. 题目:造一百万条大学生的基本信息(学校.专业.姓名.学号) 分析思路:利用Python的MySQ ...

  10. OutSystems学习一,安装以及入门

    官方网站:http://www.outsystems.com/home/HomePage.aspx 安装完成后,在官网申请自己的管理云平台 启动客户端 详细参考帮助,跟着走就行