div+css实现各种形状（精心整理）

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;}

时间： 2024-10-12 22:27:22

div+css实现各种形状（精心整理）的相关文章

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

项目需求: 要求制作上图所示的效果,能达到灵活可配的效果.我想初步想法是用div+css来制作. 抽象模型: 面对复杂的问题,要学会抽象当前的问题.下面的这个模型是我抽象出来的一个简单的解决方案. 这样我们就可以用各种css效果来组合出我们需要的效果,放到网站中可以灵活配置图形的各种样式. 技术难点: 1.如何做到让div旋转? -moz-transform: rotate(90deg); 如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转 2.如何设置div的层次关系? z

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%8A%9E%E6%B3%95%E6%95%B4%E7%90%86.html http://www.ituring.com.cn/article/64951 1. [IE6]浮动双倍边距bug: 问题 :同时使用"float"和"margin",则margin在IE6下实

DIV+CSS网页布局常用的一些基础知识整理

CSS命名规范一．文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: 二．常用类/ID命名规范页 眉:header内 容:content容 器:container页 脚:footer 版 权:copyright 导 航:menu主导航:mainMenu子导航:subMenu 标 志:logo标 语:banner标 题:title侧边栏:sidebar 图 标:Icon注 释:note

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

一.Div+css通用兼容性代码 你可以在css开头加入 *html{padding:0px} 复制代码 代码如下: <style> *html{padding:0px} /* Clear Fix */ .clearfix:after { content:”.”; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */

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

推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一个滚动的文本字幕,应用于文字.图片.表格. DIV+CSS图片不间断滚动jquery特效,横向不间断不停滚动CSS特效,使用JQ+DIV实现非常实用简单兼容各大浏览器的图片不间断滚动特效(CSS+JQ不间断滚动图片). 使用方法如下: 1.加载JavaScript. 1 <script type=&qu

跟着传智播客学习asp.net之DIV+CSS

div+css详解 学习资料:韩顺平div+css视频.css禅意花园.别具光芒.csdn网页设计专栏.开源之祖sourceforeg.net.php开源大全 www.php.open.com Div+css (sascading style sheets:层叠样式表)是什么? 传统table布局缺点: 1. 显示样式和数据是绑定在一起的 2. 布局的时候灵活度不高 3. 一个页面可能会有大量的<table>元素,代码冗余 4. 增加带宽(200字节) 5. 搜索引擎不喜欢这样的布局 优点 1

纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个边框,下面是是一篇完成的截图(不了解的可以看看:纯CSS实现tooltip提示框,CSS箭头及形状): 首先像:after一样我们介绍另外一个CSS中“ :before ”选择器 定义和用法:(参考w3school:before选择器) :before 选择器在被选元素的内容前面插入内容,使用 co

DIV+CSS 网页兼容性问题（IE6 IE7 IE8 IE9 火狐 chorm）

本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考. CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 http://www.php100.com 2. margin加倍的问题 设置为float的

纯css做三角形形状

1 /* create an arrow that points up */ 2 div.arrow-up { 3 width:0px; 4 height:0px; 5 border-left:5px solid transparent; /* left arrow slant */ 6 border-right:5px solid transparent; /* right arrow slant */ 7 border-bottom:5px solid #2f2f2f; /* bottom,