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 ...
随机推荐
- hadoop1中mapreduce原理详解
剖析Mapreduce作业运行机制:原理如下图: 原理图的解释的可以分为以下几个部分 1.客户端提交一个mapreduce的jar包给JobClient 2.JocClient通过RPC和JobTra ...
- JSP页面的五种跳转方法
①RequestDispatcher.forward() 是在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet or JSP到另外一个Se ...
- 移动App双周版本迭代实战--转载备用
对于移动互联网产品来说,迭代的速度就是生命.我创业时做移动App时是一周一版,而现在是2周1版.相比起小公司,大公司迭代时间虽长,却更为不易,因为大公司流程更多,参与人数更多,需求更多,实现这样的快速 ...
- 【MS Office2013小技巧】Word中公式中的等号对齐
步骤: 1. 先将所需要对齐的公式分不同行打出来: 2. 选中所有公式,右键点击并选择“对齐点(A) =”,如图 此时,如果能够正常对齐,则无需进行下面的步骤,但如果出现下图情况并未正常对齐的,再进行 ...
- Pentaho Data Integration Step: BD Procedure Call
官网连接:http://wiki.pentaho.com/display/EAI/Call+DB+Procedure 描述 调用数据库存储过程步骤允许用户执行一个数据库存储过程,并且得到结果.存储过程 ...
- VBA在EXCEL中创建图形线条
EXCEL使用了多少行: ActiveSheet.UsedRange.Rows.Count(再也不用循环到头啦) 创建线条并命名:ActiveSheet.Shapes.AddLine(x1,y1,x2 ...
- delphi xe5 android 开发数据访问server端(一)
第一篇我们破解并安装了xe5 第二篇我们搭建了开发环境 接下来我们开发一个三层的android程序 建立一个webservices stand-alone vcl application 作为手机访 ...
- 将excel数据导入内表的函数
call function 'TEXT_CONVERT_XLS_TO_SAP' exporting i_tab_raw_data = lt_raw "开始行 ...
- [转贴]实践:C++平台迁移以及如何用C#做C++包装层
终于有个C++ 如何调用C#类库的文章,收藏之 在前面,我们看过OpenTK与MOgre,这二个项目都是C#项目,但是他的实现都是C++.他们简单来说就是一个包装层.常见的包装方式有二种,一 种就是我 ...
- 在TMemo上画一条线
var C:TControlCanvas; begin C := TControlCanvas.Create; C.Pen.Color := clRed; C.Pen.Width := ; C.Con ...