CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

时间:2022-09-02 15:59:43

转自: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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

2.正方形

#square{

width: 200px;

height: 200px;

background-color: red;

color: white;

text-align: center;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;*/

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;*/

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

10.顶左

#triangle-topleft{

width: 0px;

height: 0px;

border-top: 100px solid red;

border-right: 100px solid transparent;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

11.顶右

#triangle-topright{

width: 0px;

height: 0px;

border-top: 100 solid red;

border-left: 100 solid transparent;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

12.底左

#triangle-bottomleft{

width: 0px;

height: 0px;

border-bottom: 100px solid red;

border-right: 100px solid transparent;

}CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

13.底右

#triangle-bottomright{

width: 0px;

height: 0px;

border-bottom: 100px solid red;

border-left: 100px solid transparent;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

14.平行四边形

#parallelogram{

width: 200px;

height: 150px;

margin-left: 30px;

-webkit-transform: skew(-30deg);

-moz-transform: skew(200deg);

-o-transform: skew(200deg);

background-color: red;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

15.

#trapezoid{

border-bottom: 100px solid red; 

border-left: 50px solid transparent; 

border-right: 50px solid transparent; 

width: 100px;

height: 0px;



}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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%;*/

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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;

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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: "";

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

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; 

}

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

至此30个例子到此结束,不足之处还请大神多多指正,共同学习进步。谢谢。。。

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦的更多相关文章

  1. 用CSS做圆角矩形

    第一种方法:如果是CSS2.2的话,可以简单写一个制作圆角矩形,分上中下裁成三张图 <title>CSS3实现圆角</title> <style type="t ...

  2. CSS border 生成三角

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. css实现圆角三角形例子&lpar;无图片&rpar;

    css实现圆角三角形例子(无图片) 以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧. 效果如下图所示 三角形所对方向&q ...

  4. css两种动态显示星星等级的比较(一星、两星、三星、四星、五星)

    原文:css两种动态显示星星等级的比较(一星.两星.三星.四星.五星) 以下是显示后的图片,相信在很多网站上都能看到这种效果,目前我知道两种实现方式 1.background-position加上一张 ...

  5. css 兼容小三角

    <!DOCTYPE><html ><head><meta http-equiv="Content-Type" content=" ...

  6. css实现小三角(原理)

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  7. 纯css制作带三角border篇&lpar;兼容所有浏览器&rpar;

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div&gt ...

  8. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  9. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

随机推荐

  1. C&num; 调用 Oracle

    C# 调用 Oracle 是如此尴尬 >System.Data.OracleClient.dll —— .Net 自带的 已经 过时作废. >要链接 Oracle 服务器,必须在 本机安装 ...

  2. 连载《一个程序猿的生命周期》- 44&period;感谢,我从事了IT相关的工作

    感谢博客园一直以来的支持,写连载都是在这里首发,相比较CSDN和开源中国气氛要好的多. 节前,想以此篇文章结束<一个程序猿的生命周期>的<生存>篇,对过10的年做一个了断,准备 ...

  3. Java 对象 及 对象的应用

    http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=30149799&id=4942380原文地址

  4. at 常用命令

    以debian 6.0.1 为例: 服务开启关闭: Usage: /etc/init.d/atd {start|stop|restart|force-reload|status} 设置一次计划任务(a ...

  5. MSSQL&mdash&semi;行转列

    行转列,是SQL中经常会遇到的一个问题,并且分为静态转换和动态转换,所谓静态转换即在转换的行数已知或固定:动态转换则为转换的行数不固定. 转换的方法一般采用case when语句或pivot(MSSQ ...

  6. 【转】SVN提示:由于目标机器积极拒绝,无法连接 的解决方法

    转载地址:http://wxiaolei.blog.163.com/blog/static/1038760120133108180596/ 安装完TSVN之后,checkout时报错,并且后来在cmd ...

  7. Web前端开发的一点记录

    工欲善其事必先利其器,开发工具选择Sublime Text 简称(ST) 本文所说的均在Windows NT 环境下使用的ST3运行. ST的Package Control安装方法: 1. 直接输入p ...

  8. HaoZip&lpar;好压&rpar; 去广告纯净版 4&period;4

    软件名称: 好压 去广告纯净版 软件语言: 简体中文 授权方式: 免费软件 运行环境: Win8 / Win7 / Vista / WinXP 软件大小: 6.3MB 图片预览: 软件简介: 好压去广 ...

  9. Python错误集

    1-->IndentationError:expected an indented block   >IndentationError: unindent does not match a ...

  10. 关于delete请求,后台接收不到数据

    在前端用axios需要这样写 /** * 删除数据 */export function del(url, data = {}) { return axios.delete(url, { data: q ...