今天看到一篇不错文章，在原来CSS3图形创建基础上扩展了很多。

这里记录总结下

心形

原理：利用 圆形 和 正方形实现

HTML：

  1. <div class="heartShaped">
  2.     <h1>heartShaped</h1>
  3. </div>

CSS：

  1. .heartShaped {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%) rotate(45deg);
  6.     background: rgba(255, 20, 147, .85);
  7.     width: 140px;
  8.     line-height: 140px;
  9.     text-align: center;
  10.     color: white;
  11.     font-size: 12px;
  12. }
  13.  
  14. .heartShaped:before, .heartShaped:after {
  15.     content: '';
  16.     position: absolute;
  17.     top:;
  18.     left: -70px;
  19.     width: 140px;
  20.     height: 140px;
  21.     border-radius: 50%;
  22.     background: rgb(255, 20, 147);
  23.     z-index: -1;
  24. }
  25.  
  26. .heartShaped:after {
  27.     top: -70px;
  28.     left:;
  29. }

气泡三角形

原理：利用 border 的 transparent 特性实现

HTML：

  1. <div class="bubbly">
  2.     <p>heartShaped</p>
  3. </div>

CSS：

  1. .bubbly {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%);
  6.     background: #00aabb;
  7.     border-radius: .4em;
  8.     width: 260px;
  9.     padding: 60px 20px;
  10.     text-align: center;
  11.     color: white;
  12.     font-size: 200%;
  13. }
  14.  
  15. .bubbly:after {
  16.     content: '';
  17.     position: absolute;
  18.     bottom:;
  19.     left: 50%;
  20.     border: 34px solid transparent;
  21.     border-top-color: #00aabb;
  22.     border-bottom:;
  23.     border-left:;
  24.     margin: 0 0 -34px -17px;
  25. }
 

切角

原理：使用线性渐变实现

HTML：

  1. <div class="notching">
  2.     <p>heartShaped</p>
  3. </div>

CSS：

  1. .notching {
  2.             position: absolute;
  3.             top: 50%;
  4.             left: 50%;
  5.             transform: translate(-50%, -50%);
  6.             width: 160px;
  7.             padding: 60px 20px;
  8.             text-align: center;
  9.             color: white;
  10.             font-size: 200%;
  11.         }
  12.  
  13.         .notching {
  14.             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;
  15.             background-size: 50% 50%;
  16.             background-repeat: no-repeat;
  17.         }

弧形切角

原理：使用径向渐变实现

HTML：

  1. <div class="arc">
  2.     <p>arc</p>
  3. </div>

CSS：

  1. .arc {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%);
  6.     width: 60px;
  7.     padding: 60px;
  8.     text-align: center;
  9.     color: white;
  10.     font-size: 200%;
  11. }
  12.  
  13. .arc {
  14.     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;
  15.     background-size: 50% 50%;
  16.     background-repeat: no-repeat;
  17. }

单个颜色实现 hover 和 active 时的明暗变化效果

原理：利用伪类及透明度实现

HTML：

  1. <div class="pesudo">
  2.     <p>pesudo</p>
  3. </div>

CSS：

  1. .pesudo {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%);
  6.     width: 120px;
  7.     padding: 60px;
  8.     text-align: center;
  9.     color: white;
  10.     font-size: 200%;
  11.     border-radius: 1em;
  12.     background: #00aabb;
  13.     cursor: pointer;
  14. }
  15.  
  16. .pesudo:before {
  17.     position: absolute;
  18.     top:;
  19.     right:;
  20.     bottom:;
  21.     left:;
  22.     z-index: -1;
  23.     border-radius: 1em;
  24.     background: rgba(0, 0, 0, .1);
  25. }
  26.  
  27. .pesudo:hover:before {
  28.     content: "";
  29. }
  30.  
  31. .pesudo:after {
  32.     position: absolute;
  33.     top:;
  34.     right:;
  35.     bottom:;
  36.     left:;
  37.     z-index: -1;
  38.     border-radius: 1em;
  39.     background: rgba(255, 255, 255, .2);
  40. }
  41.  
  42. .pesudo:active:after {
  43.     content: "";
  44. }

梯形

原理：利用伪类加旋转透视实现

HTML：

  1. <div class="trapezoid">
  2.     <p>trapezoid</p>
  3. </div>

CSS

  1. .trapezoid {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%);
  6.     width: 160px;
  7.     padding: 60px;
  8.     text-align: center;
  9.     color: white;
  10.     font-size: 200%;
  11. }
  12.  
  13. .trapezoid:before {
  14.     content: "";
  15.     position: absolute;
  16.     top:;
  17.     right:;
  18.     bottom:;
  19.     left:;
  20.     transform: perspective(40px) scaleY(1.3) rotateX(5deg);
  21.     transform-origin: bottom;
  22.     background: deeppink;
  23.     z-index: -1;
  24. }

饼图

原理：利用伪类、线性渐变、旋转实现

HTML：

  1. <div class="pie">
  2.     <p>pie</p>
  3. </div>

CSS

  1. .pie {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%);
  6.     width: 200px;
  7.     line-height: 200px;
  8.     border-radius: 50%;
  9.     text-align: center;
  10.     color: white;
  11.     font-size: 200%;
  12.     background-color: yellowgreen;
  13.     overflow: hidden;
  14.     background-image: linear-gradient(to right, transparent 50%, #655 0);
  15.     cursor: pointer;
  16. }
  17.  
  18. .pie:before {
  19.     content: "";
  20.     position: absolute;
  21.     top: 0;
  22.     left: 50%;
  23.     width: 50%;
  24.     height: 100%;
  25.     background-color: inherit;
  26.     transform-origin: left;
  27.     z-index: -1;
  28.     transform: rotate(.1turn);
  29. }
  30.  
  31. .pie:hover:before {
  32.     transition: all 1s;
  33.     transform: rotate(.45turn);
  34. }

平行四边形

原理：利用伪类、拉伸实现

HTML:

  1. <div class="parallelogram">
  2.     <p>parallelogram</p>
  3. </div>

CSS

  1. .parallelogram {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%);
  6.     width: 280px;
  7.     line-height: 150px;
  8.     text-align: center;
  9.     color: white;
  10.     font-size: 200%;
  11. }
  12.  
  13. .parallelogram:before {
  14.     content: '';
  15.     position: absolute;
  16.     top:;
  17.     right:;
  18.     bottom:;
  19.     left:;
  20.     background-color: #00aabb;
  21.     z-index: -1;
  22.     transform: skew(.08turn);
  23. }

菱形

原理：利用伪类、旋转实现

HTML:

  1. <div class="diamond">
  2.     <p>diamond</p>
  3. </div>

CSS

  1. .diamond {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%);
  6.     width: 200px;
  7.     line-height: 200px;
  8.     text-align: center;
  9.     color: white;
  10.     font-size: 200%;
  11. }
  12.  
  13. .diamond:before {
  14.     content: '';
  15.     position: absolute;
  16.     top:;
  17.     right:;
  18.     bottom:;
  19.     left:;
  20.     background-color: deeppink;
  21.     z-index: -1;
  22.     transform: rotateZ(45deg);
  23. }
 

折角

原理：利用切角、伪类、渐变、旋转实现

HTML:

  1. <div class="corner">
  2.     <p>corner</p>
  3. </div>

CSS

  1. .corner {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%);
  6.     width: 120px;
  7.     line-height: 120px;
  8.     padding: 40px;
  9.     text-align: center;
  10.     color: white;
  11.     font-size: 200%;
  12.     background: linear-gradient(-150deg, transparent 1.5em, yellowgreen 0);
  13.     border-radius: .5em;
  14. }
  15.  
  16. .corner:before {
  17.     content: '';
  18.     position: absolute;
  19.     top:;
  20.     right:;
  21.     background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat;
  22.     width: 1.73em;
  23.     height: 3em;
  24.     transform: translateY(-1.3em) rotate(-30deg);
  25.     transform-origin: bottom right;
  26.     border-bottom-left-radius: inherit;
  27.     box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
  28. }

spectiveBlur

纯 CSS 方案实现背景变暗效果（hover按钮触发）

HTML:

  1. <div class="spectiveBlur">
  2.     <p>spectiveBlur</p>
  3. </div>

CSS

  1. .spectiveBlur {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     width: 220px;
  6.     line-height: 160px;
  7.     transform: translate(-50%, -50%);
  8.     border-radius: 10px;
  9.     overflow: hidden;
  10.     background: #E91E63;
  11.     color: #fff;
  12.     font-size: 200%;
  13.     text-align: center;
  14.     cursor: pointer;
  15.     transition: transform .2s;
  16. }
  17.  
  18. .spectiveBlur:hover {
  19.     box-shadow: 0 0 0 1920px rgba(0, 0, 0, .7);
  20.     transform: translate(-50%, -50%) scale(1.2);
  21. }

条纹背景图

原理：利用渐变实现

HTML

  1. <div class="stripe">
  2.     <p>stripe</p>
  3. </div>

CSS

  1. .stripe {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     transform: translate(-50%, -50%);
  6.     width: 200px;
  7.     line-height: 200px;
  8.     text-align: center;
  9.     color: white;
  10.     font-size: 200%;
  11.     background: deeppink;
  12.     border-radius: .5em;
  13.     background: repeating-linear-gradient(45deg, #CC9999, #CC9999 15px, #CCCCCC 0, #CCCCCC 30px)
  14. }

晴天（sun）（单标签实现）

原理：利用线性渐变、阴影、旋转实现

HTML：

  1. <div class="sun">
  2.     <p>sun</p>
  3. </div>

CSS

  1. .sun {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     width: 200px;
  6.     height: 260px;
  7.     transform: translate(-50%, -50%);
  8.     text-align: center;
  9.     font-size: 200%;
  10.     color: #fff;
  11.     background: #0BF;
  12.     border-radius: 5px;
  13. }
  14.  
  15. .sun:before {
  16.     content: "";
  17.     position: absolute;
  18.     width: 80px;
  19.     height: 80px;
  20.     left: 50%;
  21.     top: 50%;
  22.     transform: translate(-50%, -50%);
  23.     border-radius: 50%;
  24.     background: rgba(255, 238, 68, 1);
  25.     box-shadow: 0 0 0 15px rgba(255, 255, 0, 0.2), 0 0 15px #fff;
  26.     z-index: -10;
  27. }
  28.  
  29. .sun:after {
  30.     content: "";
  31.     position: absolute;
  32.     top: 50%;
  33.     left: 50%;
  34.     height: 160px;
  35.     width: 160px;
  36.     transform: translate(-50%, -50%) rotate(30deg);
  37.     z-index: -100;
  38.     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%);
  39.     background-size: 20px 100%, 100% 20px;
  40.     background-repeat: no-repeat;
  41.     background-position: center center, center center;
  42.     animation: sunRotate 10s linear infinite;
  43. }
  44.  
  45. @keyframes sunRotate {
  46.     0% {
  47.         transform: translate(-50%, -50%) rotate(30deg);
  48.     }
  49.     100% {
  50.         transform: translate(-50%, -50%) rotate(390deg);
  51.     }
  52. }

多云（cloudy）（单标签实现）

原理：利用线性渐变、阴影、缩放实现

HTML

  1. <div class="cloudy">
  2.     <p>cloudy</p>
  3. </div>

CSS

  1. .cloudy {
  2.     position: absolute;
  3.     top: 50%;
  4.     left: 50%;
  5.     width: 200px;
  6.     height: 260px;
  7.     transform: translate(-50%, -50%);
  8.     text-align: center;
  9.     font-size: 200%;
  10.     color: #fff;
  11.     background: #2EB5E5;
  12.     border-radius: 5px;
  13. }
  14.  
  15. .cloudy:before {
  16.     content: "";
  17.     text-indent: 23px;
  18.     font-size: 22px;
  19.     line-height: 40px;
  20.     color: #333;
  21.     position: absolute;
  22.     height: 50px;
  23.     width: 50px;
  24.     background: #FFFFFF;
  25.     left: 30%;
  26.     top: 45%;
  27.     transform: translate(-50%, -50%);
  28.     border-radius: 50%;
  29.     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;
  30.     animation: cloudy 5s ease-in-out infinite;
  31. }
  32.  
  33. .cloudy:after {
  34.     content: "";
  35.     position: absolute;
  36.     top: 80%;
  37.     left: 50%;
  38.     height: 15px;
  39.     width: 120px;
  40.     background: rgba(0, 0, 0, .5);
  41.     border-radius: 50%;
  42.     transform: translate(-50%, -50%);
  43.     animation: cloudy_shadow 5s ease-in-out infinite;
  44. }
  45.  
  46. @keyframes cloudy {
  47.     50% {
  48.         transform: translate(-50%, -70%);
  49.     }
  50.     100% {
  51.         transform: translate(-50%, -50%);
  52.     }
  53. }
  54.  
  55. @keyframes cloudy_shadow {
  56.     50% {
  57.         transform: translate(-50%, -50%) scale(0.8);
  58.         background: rgba(0, 0, 0, .2);
  59.     }
  60.     100% {
  61.         transform: translate(-50%, -50%) scale(1);
  62.         background: rgba(0, 0, 0, .5);
  63.     }
  64. }

更多效果可以参考原网站：CSS实现各种图形

PS：这些CSS效果都是奇技淫巧，不过可以加深对CSS样式的理解，值得尝试

CSS奇思妙想图形（心形、气泡三角形、切角、梯形、饼图等）的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  2. css3实现三角形，聊天背景气泡，心形等形状

    1.聊天背景气泡: css代码如下: #talkbubble {width: 120px;margin:auto; background: red; position: relative; -moz- ...

  3. css画心形、三角形的总结

    .heart { width: 10px; height: 10px; /* position: fixed; */ background: #fff; transform: rotate(45deg ...

  4. css实现心形图案

    用1个标签实现心形图案,show you the code; <!DOCTYPE html> <html lang="en"> <head> & ...

  5. CSS实现心形、六角星、六边形、平行四边形等几何

    本文将利用border属性实现简单几何的绘制: 效果图: 正八角星 说明:采用两个正方形以中心进行旋转叠加: /* 八角星 */ #burst-8 { background: #6376ff1f; w ...

  6. CSS图形基础：纯CSS绘制图形

    为了在页面中利用CSS3绘制图形,在页面中定义 <div  class="container"> <div class="shape"> ...

  7. CSS 不规则图形绘制

    基础技能1 - 神奇的border 我们先来画一个长方形: .Rectangle { height: 100px; width: 200px; background: darkgray; border ...

  8. CSS制作图形速查表

    很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

  9. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

随机推荐

  1. Centos7.2 搭建Lamp服务器以及迁移WordPress个人博客详细过程

    其实自己的博客搭了有段时间了,但是由于自己不太确定是不是一定要用wd的框架,以及实验室公网服务器的不稳定,就一直荒废着. 今天偶然间看到了腾讯云对于学生的优惠活动,毕业之前每月只要8元的云服务器(就算 ...

  2. Neo4J图库的基础介绍(一)

    •Neo4j是一个高性能的,NOSQL图形数据库,它完全支持ACID(原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability))数据 ...

  3. zk个人入门学习总结(1)

    ZooKeeper是一种分布式协调服务,用于管理大型主机.在分布式环境中协调和管理服务是一个复杂的过程.ZooKeeper通过其简单的架构和API解决了这个问题.ZooKeeper允许开发人员专注于核 ...

  4. unity案例入门(二)(坦克大战)

    1. 案例简述 这个案例实现一个简单的坦克对战游戏,两个玩家在一个地图上PK. 2. 控制坦克移动 与案例一中小球的移动方式不同,坦克在横向上不能是平移,因此横向按键控制的应该是坦克旋转. publi ...

  5. Asp.net mvc 5 razor

    一开始学习dotnet的web项目是Asp.net webform,完全不理解项目为什么要这样设计,就简单的使用ajax调用后台的代码不好吗?为什么还要搞一些什么代码后置的东东. 还有就是有各种加载问 ...

  6. 【BZOJ2734】【HNOI2012】集合选数（状态压缩，动态规划）

    [BZOJ2734][HNOI2012]集合选数(状态压缩,动态规划) 题面 Description <集合论与图论>这门课程有一道作业题,要求同学们求出{1, 2, 3, 4, 5}的所 ...

  7. IDEA jsp模板

    > File > Settings- > File and Code Templates > Other >Jsp files >Jsp File.jsp < ...

  8. c++函数常用

    isalnum 判断一个字符是否是字符类的数字或字母isalpha 判断一个字符是否是字母isblank 判断一个字符是否是空白字符(空格,水平制表符,TAB)iscntrl 判断一个控制符(ASCI ...

  9. JVM内存越多，能创建的线程越少，越容易发生java.lang.OutOfMemoryError: unable to create new native thread。

    一.认识问题: 首先我们通过下面这个 测试程序 来认识这个问题:运行的环境 (有必要说明一下,不同环境会有不同的结果):32位 Windows XP,Sun JDK 1.6.0_18, eclipse ...

  10. linux操作日志：远程登录设置

    想要远程linux服务器,首先需要在服务器上开通ssh服务,安装命令如下: sudo apt-get install openssh-server   在上图的提示中,输入“y”,继续等待安装,安装成 ...