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形状 CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦等等
CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等 新出的HTML5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点, ...
- CSS实现圆角，三角，五角星，五边形，爱心，12角星，8角星，圆，椭圆，圆圈，八卦
CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦等等 新出的html5新增了不少标签,性能更强,原来的很繁琐的功能几个标签就能实现,同时CSS3也推出,更是一大亮点, ...
- css手机圆角毛刺_CSS毛刺效果
css手机圆角毛刺 View demo 查看演示Download Source 下载源 Today we'd like to show you how to create a little exper ...
- HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的)
HTML+CSS+JavaScript 制作电子版的烂漫爱心表白动画(程序员也是很烂漫的) 程序员给大家留下的印象往往是代码的机器,整天写代码-程序员不懂爱!其实这是对程序员一种片面的看法.程序员固然 ...
- 简洁文艺风博客园CSS定制——圆角蓝文艺字体
简洁文艺风博客园CSS定制--圆角蓝文艺字体 今天入驻博客园,自己做了下页面的CSS 瞬间变得舒服多了 哈哈 直接上代码 1 /* Minification failed. Returning unm ...
- 用CSS伪类选择器做一个爱心
用CSS伪类选择器做一个爱心 这里我们会用到 position:relative:相对定位 position:absolute;绝对定位 border-radius:圆角属性 transform:变换 ...
- [css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
- corners边框_第11天｜16天搞定前端，CSS的圆角边框，让人赏心悦目
有人可能会疑惑,我为什么专门用一节内容来说边框和圆角.其实,不为别的,只为它们在开发中,在Web系统中,在手机页面中,太常用了.有边框的页面,让人耳目一新,一目了然:有圆角的内容,让人赏心悦目,心旷神 ...
- 纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计 标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
- div+css实现圆角阴影效果
使用div+css实现圆角阴影 在css中,使用border-radius属性设置圆角,使用box-shadow属性设置阴影 下面教你css如何实现圆角边框阴影 代码: <input type= ...
最新文章
- Android ProgressBar 加载中界面实现(loading 动画) 实现菊花的效果
- boost linux 下安装
- Jquery UI dialog 详解
- 30岁转行测试工程师_30岁一无所长，转行UI设计还合适吗？
- 电脑学习方法_怎样快速学习和熟悉电脑知识？|从小白到大神的快捷方法
- 以太网速率怎么手动设置_OPENWRT-KOOLSHARE软路由，一级/单臂/二级/旁软路由设置单臂路由联网教程...
- java 在线编辑器_最好的Markdown开源在线编辑器，没有之一！
- 圣诞节生成头像微信小程序源码1.3.0
- android华为指纹开发_2020指纹芯片行业市场调研分析报告
- python学习——函数及其参数
- 安全公司本意告警用户，不料先遭攻击并泄露超50亿个人数据
- 趣达学院学习有奖活动！
- 直接读取Excel文件数据
- 随机森林 ---sklearn
- 【基础处理】基于matlab Fxlms算法有源噪声控制系统【含Matlab源码 1394期】
- 使用yum快速部署Oracle安装环境 11g
- PHP 中文手册-国内镜像
- 计算机无法从usb启动不了,无法从u盘启动【设置思路】
- 使用Apple第三方登录Java版
- 【ODX介绍】-4.3-UDS诊断$3E服务在ODX-D诊断描述文件中如何描述