CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）
今天看到一篇不错文章，在原来CSS3图形创建基础上扩展了很多。
这里记录总结下
心形
原理：利用 圆形 和 正方形实现
HTML：
<div class="heartShaped">
<h1>heartShaped</h1>
</div>
CSS：
.heartShaped {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
background: rgba(255, 20, 147, .85);
width: 140px;
line-height: 140px;
text-align: center;
color: white;
font-size: 12px;
}
.heartShaped:before, .heartShaped:after {
content: '';
position: absolute;
top:;
left: -70px;
width: 140px;
height: 140px;
border-radius: 50%;
background: rgb(255, 20, 147);
z-index: -1;
}
.heartShaped:after {
top: -70px;
left:;
}
气泡三角形
原理：利用 border 的 transparent 特性实现
HTML：
<div class="bubbly">
<p>heartShaped</p>
</div>
CSS：
.bubbly {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #00aabb;
border-radius: .4em;
width: 260px;
padding: 60px 20px;
text-align: center;
color: white;
font-size: 200%;
}
.bubbly:after {
content: '';
position: absolute;
bottom:;
left: 50%;
border: 34px solid transparent;
border-top-color: #00aabb;
border-bottom:;
border-left:;
margin: 0 0 -34px -17px;
}
切角
原理：使用线性渐变实现
HTML：
<div class="notching">
<p>heartShaped</p>
</div>
CSS：
.notching {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 160px;
padding: 60px 20px;
text-align: center;
color: white;
font-size: 200%;
}
.notching {
background: linear-gradient(135deg, transparent 15px, deeppink 0) top left, linear-gradient(-135deg, transparent 15px, deeppink 0) top right, linear-gradient(-45deg, transparent 15px, deeppink 0) bottom right, linear-gradient(45deg, transparent 15px, deeppink 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
弧形切角
原理：使用径向渐变实现
HTML：
<div class="arc">
<p>arc</p>
</div>
CSS：
.arc {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
padding: 60px;
text-align: center;
color: white;
font-size: 200%;
}
.arc {
background: radial-gradient(circle at top left, transparent 15px, yellowgreen 0) top left, radial-gradient(circle at top right, transparent 15px, yellowgreen 0) top right, radial-gradient(circle at bottom right, transparent 15px, yellowgreen 0) bottom right, radial-gradient(circle at bottom left, transparent 15px, yellowgreen 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
单个颜色实现 hover 和 active 时的明暗变化效果
原理：利用伪类及透明度实现
HTML：
<div class="pesudo">
<p>pesudo</p>
</div>
CSS：
.pesudo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
padding: 60px;
text-align: center;
color: white;
font-size: 200%;
border-radius: 1em;
background: #00aabb;
cursor: pointer;
}
.pesudo:before {
position: absolute;
top:;
right:;
bottom:;
left:;
z-index: -1;
border-radius: 1em;
background: rgba(0, 0, 0, .1);
}
.pesudo:hover:before {
content: "";
}
.pesudo:after {
position: absolute;
top:;
right:;
bottom:;
left:;
z-index: -1;
border-radius: 1em;
background: rgba(255, 255, 255, .2);
}
.pesudo:active:after {
content: "";
}
梯形
原理：利用伪类加旋转透视实现
HTML：
<div class="trapezoid">
<p>trapezoid</p>
</div>
CSS
.trapezoid {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 160px;
padding: 60px;
text-align: center;
color: white;
font-size: 200%;
}
.trapezoid:before {
content: "";
position: absolute;
top:;
right:;
bottom:;
left:;
transform: perspective(40px) scaleY(1.3) rotateX(5deg);
transform-origin: bottom;
background: deeppink;
z-index: -1;
}
饼图
原理：利用伪类、线性渐变、旋转实现
HTML：
<div class="pie">
<p>pie</p>
</div>
CSS
.pie {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
line-height: 200px;
border-radius: 50%;
text-align: center;
color: white;
font-size: 200%;
background-color: yellowgreen;
overflow: hidden;
background-image: linear-gradient(to right, transparent 50%, #655 0);
cursor: pointer;
}
.pie:before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color: inherit;
transform-origin: left;
z-index: -1;
transform: rotate(.1turn);
}
.pie:hover:before {
transition: all 1s;
transform: rotate(.45turn);
}
平行四边形
原理：利用伪类、拉伸实现
HTML:
<div class="parallelogram">
<p>parallelogram</p>
</div>
CSS
.parallelogram {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 280px;
line-height: 150px;
text-align: center;
color: white;
font-size: 200%;
}
.parallelogram:before {
content: '';
position: absolute;
top:;
right:;
bottom:;
left:;
background-color: #00aabb;
z-index: -1;
transform: skew(.08turn);
}
菱形
原理：利用伪类、旋转实现
HTML:
<div class="diamond">
<p>diamond</p>
</div>
CSS
.diamond {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
line-height: 200px;
text-align: center;
color: white;
font-size: 200%;
}
.diamond:before {
content: '';
position: absolute;
top:;
right:;
bottom:;
left:;
background-color: deeppink;
z-index: -1;
transform: rotateZ(45deg);
}
折角
原理：利用切角、伪类、渐变、旋转实现
HTML:
<div class="corner">
<p>corner</p>
</div>
CSS
.corner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
line-height: 120px;
padding: 40px;
text-align: center;
color: white;
font-size: 200%;
background: linear-gradient(-150deg, transparent 1.5em, yellowgreen 0);
border-radius: .5em;
}
.corner:before {
content: '';
position: absolute;
top:;
right:;
background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat;
width: 1.73em;
height: 3em;
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
}
spectiveBlur
纯 CSS 方案实现背景变暗效果（hover按钮触发）
HTML:
<div class="spectiveBlur">
<p>spectiveBlur</p>
</div>
CSS
.spectiveBlur {
position: absolute;
top: 50%;
left: 50%;
width: 220px;
line-height: 160px;
transform: translate(-50%, -50%);
border-radius: 10px;
overflow: hidden;
background: #E91E63;
color: #fff;
font-size: 200%;
text-align: center;
cursor: pointer;
transition: transform .2s;
}
.spectiveBlur:hover {
box-shadow: 0 0 0 1920px rgba(0, 0, 0, .7);
transform: translate(-50%, -50%) scale(1.2);
}
条纹背景图
原理：利用渐变实现
HTML
<div class="stripe">
<p>stripe</p>
</div>
CSS
.stripe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
line-height: 200px;
text-align: center;
color: white;
font-size: 200%;
background: deeppink;
border-radius: .5em;
background: repeating-linear-gradient(45deg, #CC9999, #CC9999 15px, #CCCCCC 0, #CCCCCC 30px)
}
晴天（sun）（单标签实现）
原理：利用线性渐变、阴影、旋转实现
HTML：
<div class="sun">
<p>sun</p>
</div>
CSS
.sun {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 260px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 200%;
color: #fff;
background: #0BF;
border-radius: 5px;
}
.sun:before {
content: "";
position: absolute;
width: 80px;
height: 80px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: rgba(255, 238, 68, 1);
box-shadow: 0 0 0 15px rgba(255, 255, 0, 0.2), 0 0 15px #fff;
z-index: -10;
}
.sun:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
height: 160px;
width: 160px;
transform: translate(-50%, -50%) rotate(30deg);
z-index: -100;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%), -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
background-size: 20px 100%, 100% 20px;
background-repeat: no-repeat;
background-position: center center, center center;
animation: sunRotate 10s linear infinite;
}
@keyframes sunRotate {
0% {
transform: translate(-50%, -50%) rotate(30deg);
}
100% {
transform: translate(-50%, -50%) rotate(390deg);
}
}
多云（cloudy）（单标签实现）
原理：利用线性渐变、阴影、缩放实现
HTML
<div class="cloudy">
<p>cloudy</p>
</div>
CSS
.cloudy {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 260px;
transform: translate(-50%, -50%);
text-align: center;
font-size: 200%;
color: #fff;
background: #2EB5E5;
border-radius: 5px;
}
.cloudy:before {
content: "";
text-indent: 23px;
font-size: 22px;
line-height: 40px;
color: #333;
position: absolute;
height: 50px;
width: 50px;
background: #FFFFFF;
left: 30%;
top: 45%;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: #FFFFFF 65px -15px 0 -5px, #FFFFFF 25px -25px, #FFFFFF 30px 10px, #FFFFFF 60px 15px 0 -10px, #FFFFFF 85px 5px 0 -5px, #C8C8C8 35px -35px, #C8C8C8 66px -27px 0 -5px, #C8C8C8 91px -10px 0 -8px;
animation: cloudy 5s ease-in-out infinite;
}
.cloudy:after {
content: "";
position: absolute;
top: 80%;
left: 50%;
height: 15px;
width: 120px;
background: rgba(0, 0, 0, .5);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: cloudy_shadow 5s ease-in-out infinite;
}
@keyframes cloudy {
50% {
transform: translate(-50%, -70%);
}
100% {
transform: translate(-50%, -50%);
}
}
@keyframes cloudy_shadow {
50% {
transform: translate(-50%, -50%) scale(0.8);
background: rgba(0, 0, 0, .2);
}
100% {
transform: translate(-50%, -50%) scale(1);
background: rgba(0, 0, 0, .5);
}
}
更多效果可以参考原网站：CSS实现各种图形
PS：这些CSS效果都是奇技淫巧，不过可以加深对CSS样式的理解，值得尝试
CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）的更多相关文章
- CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- css3实现三角形，聊天背景气泡，心形等形状
1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...
- css画心形、三角形的总结
.heart { width: 10px; height: 10px; /* position: fixed; */ background: #fff; transform: rotate(45deg ...
- css实现心形图案
用1个标签实现心形图案,show you the code; <!DOCTYPE html> <html lang="en"> <head> & ...
- CSS实现心形、六角星、六边形、平行四边形等几何
本文将利用border属性实现简单几何的绘制: 效果图: 正八角星 说明:采用两个正方形以中心进行旋转叠加: /* 八角星 */ #burst-8 { background: #6376ff1f; w ...
- CSS图形基础：纯CSS绘制图形
为了在页面中利用CSS3绘制图形,在页面中定义 <div class="container"> <div class="shape"> ...
- CSS 不规则图形绘制
基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border ...
- CSS制作图形速查表
很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...
- 【转】CSS制作图形速查表-存档
http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...
随机推荐
- Centos7.2 搭建Lamp服务器以及迁移WordPress个人博客详细过程
其实自己的博客搭了有段时间了,但是由于自己不太确定是不是一定要用wd的框架,以及实验室公网服务器的不稳定,就一直荒废着. 今天偶然间看到了腾讯云对于学生的优惠活动,毕业之前每月只要8元的云服务器(就算 ...
- Neo4J图库的基础介绍(一)
•Neo4j是一个高性能的,NOSQL图形数据库,它完全支持ACID(原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability))数据 ...
- zk个人入门学习总结(1)
ZooKeeper是一种分布式协调服务,用于管理大型主机.在分布式环境中协调和管理服务是一个复杂的过程.ZooKeeper通过其简单的架构和API解决了这个问题.ZooKeeper允许开发人员专注于核 ...
- unity案例入门(二)(坦克大战)
1. 案例简述 这个案例实现一个简单的坦克对战游戏,两个玩家在一个地图上PK. 2. 控制坦克移动 与案例一中小球的移动方式不同,坦克在横向上不能是平移,因此横向按键控制的应该是坦克旋转. publi ...
- Asp.net mvc 5 razor
一开始学习dotnet的web项目是Asp.net webform,完全不理解项目为什么要这样设计,就简单的使用ajax调用后台的代码不好吗?为什么还要搞一些什么代码后置的东东. 还有就是有各种加载问 ...
- 【BZOJ2734】【HNOI2012】集合选数（状态压缩，动态规划）
[BZOJ2734][HNOI2012]集合选数(状态压缩,动态规划) 题面 Description <集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所 ...
- IDEA jsp模板
> File > Settings- > File and Code Templates > Other >Jsp files >Jsp File.jsp < ...
- c++函数常用
isalnum 判断一个字符是否是字符类的数字或字母isalpha 判断一个字符是否是字母isblank 判断一个字符是否是空白字符(空格,水平制表符,TAB)iscntrl 判断一个控制符(ASCI ...
- JVM内存越多，能创建的线程越少，越容易发生java.lang.OutOfMemoryError: unable to create new native thread。
一.认识问题: 首先我们通过下面这个 测试程序 来认识这个问题:运行的环境 (有必要说明一下,不同环境会有不同的结果):32位 Windows XP,Sun JDK 1.6.0_18, eclipse ...
- linux操作日志：远程登录设置
想要远程linux服务器,首先需要在服务器上开通ssh服务,安装命令如下: sudo apt-get install openssh-server 在上图的提示中,输入“y”,继续等待安装,安装成 ...