CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦
转自：http://blog.csdn.net/chenhongwu666/article/details/38905803
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
新出的html5新增了不少标签，性能更强，原来的很繁琐的功能几个标签就能实现，同时CSS3也推出，更是一大亮点，下面是css3的一切用法，在此总结一下，以供需要的朋友们，总共30个例子
1.长方形
#Rectangle{
width: 200px;
height: 50px;
background-color: red;
color: white;
text-align: center;
}
2.正方形
#square{
width: 200px;
height: 200px;
background-color: red;
color: white;
text-align: center;
}
3.实心圆
#perfect-circle{
width: 200px;
height: 200px;
background-color: red;
color: white;
text-align: center;
border-radius: 100px;
/*-webkit-border-radius: 100px;*/
-moz-border-radius: 100px;
}
4.圈
#circle{
width: 200px;
height: 200px;
background-color: white;
color: black;
text-align: center;
border-radius: 100px;
/*-webkit-border-radius: 10px;*/
/*-moz-border-radius: 100px;*/
border:3px red solid;
}
5.椭圆
#ellipse{
width: 200px;
height: 100px;
background-color: red;
color: white;
text-align: center;
border-radius: 100px/50px;
/*-webkit-border-radius: 100px/50px;*/
/*-moz-border-radius: 100px/50px;*/
}
6.上三角
#triangle-up{
width: 0px;
height: 0px;
color: white;
text-align: center;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
/*-webkit-border-top-left-radius: 50px solid transparent;*/
/*-webkit-border-top-right-radius: 50px solid transparent;*/
/*-webkit-border-bottom-left-radius: 100px solid red;*/
/*-webkit-border-bottom-right-radius: 100px solid red;*/
}
7.下三角
#triangle-down{
width: 0px;
height: 0px;
color: white;
text-align: center;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
8.左三角
#triangle-left{
width: 0px;
height: 0px;
color: white;
text-align: center;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
9.右三角
#triangle-right{
width: 0px;
height: 0px;
color: white;
text-align: center;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
10.顶左
#triangle-topleft{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
11.顶右
#triangle-topright{
width: 0px;
height: 0px;
border-top: 100 solid red;
border-left: 100 solid transparent;
}
12.底左
#triangle-bottomleft{
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
13.底右
#triangle-bottomright{
width: 0px;
height: 0px;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
14.平行四边形
#parallelogram{
width: 200px;
height: 150px;
margin-left: 30px;
-webkit-transform: skew(-30deg);
-moz-transform: skew(200deg);
-o-transform: skew(200deg);
background-color: red;
}
15.
#trapezoid{
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 100px;
height: 0px;
}
16. #star-five{
width: 0;
height: 0;
color: red;
margin: 50px 0;
position: relative;
display: block;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
-moz-transfrom:rotate(35deg);
-webkit-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg);
}
#star-five:before{
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 80px solid red;
position: absolute;
top: -45px;
left: -65px;
color: white;
display: block;
content: "";
-moz-transform:rotate(-35deg);
-webkit-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
-o-transform:rotate(-35deg);
}
#star-five:after{
width: 0;
height: 0;
display: block;
position: absolute;
color: red;
top: 3px;
left: -105px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
content: "";
-moz-transform:rotate(-70deg);
-webkit-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
}
17. #star-six{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after{
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
18. #pentagon{
width: 54px;
position: relative;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before{
content: "";
position: absolute;
width: 0;
height: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}
19. #hexagon{
width: 100px;
height: 55px;
background-color: red;
position: relative;
}
#hexagon:before{
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: ;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
#hexagon:after{
content: "";
left: 0;
width: 0;
height: 0;
bottom: -25px;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
20. #octagon{
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
#octagon:before{
width: 42px;
height: 0;
top: 0;
left: 0;
position: absolute;
content: "";
border-left: 29px solid #eee;
border-right: 29px solid #eee;
border-bottom: 29px solid red;
}
#octagon:after{
width: 42px;
height: 0;
left: 0;
bottom: 0;
position: absolute;
content: "";
border-left: 29px solid #eee;
border-right: 29px solid #eee;
border-top: 29px solid red;
}
21 #heart{
width: 100px;
height: 90px;
position: relative;
}
#heart:before,#heart:after{
width: 50px;
height: 80px;
left: 50px;
top: 0;
background-color: red;
position: absolute;
content: "";
-moz-border-radius:50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-o-transform-origin:0 100%;
tansform-origin:0 100%;
}
#heart:after{
left: 0;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
}
22. #infinity{
width: 212px;
height: 100px;
position: relative;
}
#infinity:before,#infinity:after{
width: 60px;
height: 60px;
top: 0;
left: 0;
border: 20px solid red;
position: absolute;
content: "";
border-radius: 50px 50px 0 50px;
-webkit-border-radius:50px 50px 0 50px;
-moz-border-radius:50px 50px 0 50px;
transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
}
#infinity:after{
left: auto;
right: 0;
border-radius: 50px 50px 50px 0;
-webkit-border-radius:50px 50px 50px 0;
-moz-border-radius:50px 50px 50px 0;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
23. #egg{
width: 126px;
height: 180px;
background-color: red;
display: block;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
/*-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%;*/
}
24. #pacman{
width: 0;
height: 0;
border-right: 60px solid transparent;
border-left: 60px solid red;
border-top: 60px solid red;
border-bottom: 60px solid red;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
}
25. #talkbubble{
width: 200px;
height: 100px;
background-color: red;
position: relative;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
}
#talkbubble:before{
width: 0;
height: 0;
right: 100%;
top: 30px;
position: absolute;
content: "";
border-top: 15px solid transparent;
border-right: 30px solid red;
border-bottom: 15px solid transparent;
}
26. #burst-12{
width: 80px;
height: 80px;
background-color: red;
position: relative;
text-align: center;
}
#burst-12:before,#burst-12:after{
width: 80px;
height: 80px;
top: 0;
left: 0;
background-color: red;
position: absolute;
content: "";
}
#burst-12:before{
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
}
#burst-12:after{
transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-ms-transform:rotate(60deg);
-moz-transform:rotate(60deg);
-o-transform:rotate(60deg);
}
27. #burst-8{
width: 80px;
height: 80px;
background-color: red;
text-align: center;
position: relative;
transform:rotate(20deg);
-webkit-transform:rotate(20deg);
-ms-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-o-transform:rotate(20deg);
}
#burst-8:before{
width: 80px;
height: 80px;
top: 0;
left: 0;
background-color: red;
position: absolute;
content: "";
transform:rotate(135deg);
-webkit-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);
}
29. #diamond{
width: 50px;
height: 0;
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
position: relative;
margin: 20px 0 50px 0;
}
#diamond:after{
width: 0;
height: 0;
top: 25px;
left: -25px;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
position: absolute;
content: "";
}
30. #yin-yang{
width: 96px;
height: 48px;
background-color: #fff;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
width: 12px;
height: 12px;
top: 50%;
left: 0;
content: "";
position: absolute;
background-color: #fff;
border: 18px solid red;
border-radius: 100%;
}
#yin-yang:after {
width: 12px;
height: 12px;
top: 50%;
left: 50%;
background-color: red;
border: 18px solid #fff;
border-radius:100%;
content: "";
position: absolute;
}
至此30个例子到此结束，不足之处还请大神多多指正，共同学习进步。谢谢。。。
CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦的更多相关文章
- 用CSS做圆角矩形
第一种方法:如果是CSS2.2的话,可以简单写一个制作圆角矩形,分上中下裁成三张图 <title>CSS3实现圆角</title> <style type="t ...
- CSS border 生成三角
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- css实现圆角三角形例子(无图片)
css实现圆角三角形例子(无图片) 以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧. 效果如下图所示 三角形所对方向&q ...
- css两种动态显示星星等级的比较（一星、两星、三星、四星、五星）
原文:css两种动态显示星星等级的比较(一星.两星.三星.四星.五星) 以下是显示后的图片,相信在很多网站上都能看到这种效果,目前我知道两种实现方式 1.background-position加上一张 ...
- css 兼容小三角
<!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...
- css实现小三角（原理）
效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...
- 纯css制作带三角border篇(兼容所有浏览器)
今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...
- css制作小三角
视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...
- CSS的小三角
上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...
随机推荐
- DISC免费性格测试题
现在给大家推荐一款世界500强和猎头公司招聘人才时用的DISC性格测评,用在找对象方面也比较合适.大家不妨看下自己的性格,就知道该找什么样的意中人啦--- 在每一个大标题中的四个选择题中只选择一个最符 ...
- 简简单单制作鼠标静态动态 ani cur 小结 鼠标形状指针
近日在网上看到一个视频录制软件里的鼠标样子的指针感觉蛮好的自己制作了一个,效果还不错,几乎跟那个鼠标形状一模一样啦.总结了下制作过程现分享如下:1.首先用ps建立一个30*30像素的空白图片 然后将自 ...
- hadoop1 和haddop2 mapperreducer的wordcount详解
转 mapreduce中wordcount详细介绍(包括hadoop1和hadoop2版本) 发表于1年前(2014-04-24 10:08) 阅读(1458) | 评论(0) 1人收藏此文章, ...
- C/S和B/S两种软件体系结构
目前两种流行的软件体系结构就是C/S和B/S体系结构,下面对两种体系结构进行一下总结: 1.C/S(客户端/服务器模式): 客户端和服务器都是独立的计算机,客户端是面向最终用户的应用程序或一些接口设备 ...
- ubuntu maven 安装 设置
http://blog.csdn.net/tiefanhe/article/details/9774189 1.安装 maven ,下载地址:http://maven.apache.org/downl ...
- [BZOJ 1009] [HNOI2008] GT考试 【AC自动机 + 矩阵乘法优化DP】
题目链接:BZOJ - 1009 题目分析 题目要求求出不包含给定字符串的长度为 n 的字符串的数量. 既然这样,应该就是 KMP + DP ,用 f[i][j] 表示长度为 i ,匹配到模式串第 j ...
- Android 观察系统中短信内容的变化（内容观察者）
//内容观察者(如果系统的短信发生了变化,比如刚获取一条短信,那么将触发onChange方法) ContentResolver contentResolver = getContentResolver ...
- PCB 敷铜间距规则(转)
第一优先规则: First Object = InPolygon, Second Object = All 第二优先规则:First Object = All, Second Object = All ...
- 在VS2008中配置WDK7600驱动开发环境
网上这类资料多如牛毛,也许很多人都是转来转去,却很有人去真正的测试,有时候感觉确实对他人也是一种误导. 这里是我自己在VS2008 + WDK7600.16385.0 + DDKWizard配置自己的 ...
- 【Java基础01】Java InputStream的read方法
JDK关于InputStream中的read方法的描述: (1) read() : 从输入流中读取数据的下一个字节,返回0到255范围内的int字节值.如果因为已经到达流末尾而没有可用的字节,则返回 ...