【01】CSS制作的图形

 
绘制五角星：
 
通过border绘制三角形。然后通过transfrom来旋转35度。
绘制对称的图形，最后绘制顶部的三角形即可。
 
元素本身，加上：before和：after。
 
 
绘制爱心：
 
 
 
 
矩形，加圆角，加旋转。
 
绘制倒8：
 
 
 
 
显然是：三个角是圆角。然后旋转。
 
 
绘制开心笑：
 
四个角圆角。然后右border-right为透明即可。
 
 
代码如下：
 
  1. <!DOCTYPE HTML>
  2. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  6. <title>测试</title>
  7. <style type="text/css">
  8. *{
  9. margin:0;
  10. padding:0;
  11. border:0;
  12. }
  14. .wrap {
  15. position: absolute;
  16. }
  18. .arrow {
  19. position: relative;
  20. width:0;
  21. height:0;
  22. border-top:9px solid transparent;
  23. border-right:9px solid #000;
  24. -webkit-transform: rotate(10deg);
  25. -moz-transform: rotate(10deg);
  26. -ms-transform: rotate(10deg);
  27. -o-transform: rotate(10deg);
  28. }
  30. .arrow:after {
  31. content:"";
  32. position: absolute;
  33. border:0 solid transparent;
  34. border-top:3px solid #000;
  35. border-radius:20px000;
  36. top:-12px;
  37. left:-9px;
  38. width:12px;
  39. height:12px;
  40. -webkit-transform: rotate(45deg);
  41. -moz-transform: rotate(45deg);
  42. -ms-transform: rotate(45deg);
  43. -o-transform: rotate(45deg);
  44. }
  46. .star-six {
  47. width:0;
  48. height:0;
  49. border-left:50px solid transparent;
  50. border-right:50px solid transparent;
  51. border-bottom:100px solid #99CC33;
  52. position: relative;
  53. }
  55. .star-six:after {
  56. width:0;
  57. height:0;
  58. border-left:50px solid transparent;
  59. border-right:50px solid transparent;
  60. border-top:100px solid #99CC33;
  61. position: absolute;
  62. content:"";
  63. top:30px;
  64. left:-50px;
  65. }
  67. .star-five {
  68. margin:50px0;
  69. position: relative;
  70. display: block;
  71. color:#0066CC;
  72. width:0px;
  73. height:0px;
  74. border-right:100px solid transparent;
  75. border-bottom:70px solid #0066CC;
  76. border-left:100px solid transparent;
  77. -moz-transform: rotate(35deg);
  78. -webkit-transform: rotate(35deg);
  79. -ms-transform: rotate(35deg);
  80. -o-transform: rotate(35deg);
  81. }
  83. .star-five:before {
  84. border-bottom:80px solid #0066CC;
  85. border-left:30px solid transparent;
  86. border-right:30px solid transparent;
  87. position: absolute;
  88. height:0;
  89. width:0;
  90. top:-45px;
  91. left:-65px;
  92. display: block;
  93. content:'';
  94. -webkit-transform: rotate(-35deg);
  95. -moz-transform: rotate(-35deg);
  96. -ms-transform: rotate(-35deg);
  97. -o-transform: rotate(-35deg);
  98. }
  100. .star-five:after {
  101. position: absolute;
  102. display: block;
  103. color:#0066CC;
  104. top:3px;
  105. left:-105px;
  106. width:0px;
  107. height:0px;
  108. border-right:100px solid transparent;
  109. border-bottom:70px solid #0066CC;
  110. border-left:100px solid transparent;
  111. -webkit-transform: rotate(-70deg);
  112. -moz-transform: rotate(-70deg);
  113. -ms-transform: rotate(-70deg);
  114. -o-transform: rotate(-70deg);
  115. content:'';
  116. }
  118. .heart {
  119. position: relative;
  120. width:100px;
  121. height:90px;
  122. }
  124. .heart:before,
  125. .heart:after {
  126. position: absolute;
  127. content:"";
  128. left:50px;
  129. top:0;
  130. width:50px;
  131. height:80px;
  132. background: red;
  133. -moz-border-radius:50px50px00;
  134. border-radius:50px50px00;
  135. -webkit-transform: rotate(-45deg);
  136. -moz-transform: rotate(-45deg);
  137. -ms-transform: rotate(-45deg);
  138. -o-transform: rotate(-45deg);
  139. transform: rotate(-45deg);
  140. -webkit-transform-origin:0100%;
  141. -moz-transform-origin:0100%;
  142. -ms-transform-origin:0100%;
  143. -o-transform-origin:0100%;
  144. transform-origin:0100%;
  145. }
  147. .heart:after {
  148. left:0;
  149. -webkit-transform: rotate(45deg);
  150. -moz-transform: rotate(45deg);
  151. -ms-transform: rotate(45deg);
  152. -o-transform: rotate(45deg);
  153. transform: rotate(45deg);
  154. -webkit-transform-origin:100%100%;
  155. -moz-transform-origin:100%100%;
  156. -ms-transform-origin:100%100%;
  157. -o-transform-origin:100%100%;
  158. transform-origin:100%100%;
  159. }
  161. .infinity {
  162. position: relative;
  163. width:212px;
  164. height:100px;
  165. }
  167. .infinity:before,
  168. .infinity:after {
  169. content:"";
  170. position: absolute;
  171. top:0;
  172. left:0;
  173. width:60px;
  174. height:60px;
  175. border:20px solid #FF33CC;
  176. -moz-border-radius:50px50px050px;
  177. border-radius:50px50px050px;
  178. -webkit-transform: rotate(-45deg);
  179. -moz-transform: rotate(-45deg);
  180. -ms-transform: rotate(-45deg);
  181. -o-transform: rotate(-45deg);
  182. transform: rotate(-45deg);
  183. }
  185. .infinity:after {
  186. left:auto;
  187. right:0;
  188. -moz-border-radius:50px50px50px0;
  189. border-radius:50px50px50px0;
  190. -webkit-transform: rotate(45deg);
  191. -moz-transform: rotate(45deg);
  192. -ms-transform: rotate(45deg);
  193. -o-transform: rotate(45deg);
  194. transform: rotate(45deg);
  195. }
  197. .pacman {
  198. width:0px;
  199. height:0px;
  200. border-right:60px solid transparent;
  201. border-top:60px solid #FFCC00;
  202. border-left:60px solid #FFCC00;
  203. border-bottom:60px solid #FFCC00;
  204. border-top-left-radius:60px;
  205. border-top-right-radius:60px;
  206. border-bottom-left-radius:60px;
  207. border-bottom-right-radius:60px;
  208. }
  210. .yin-yang {
  211. width:96px;
  212. height:48px;
  213. background:#fff;
  214. border-color:#000;
  215. border-style: solid;
  216. border-width:2px2px50px2px;
  217. border-radius:100%;
  218. position: relative;
  219. }
  221. .yin-yang:before {
  222. content:"";
  223. position: absolute;
  224. top:50%;
  225. left:0;
  226. background:#fff;
  227. border:18px solid #000;
  228. border-radius:100%;
  229. width:12px;
  230. height:12px;
  231. }
  233. .yin-yang:after {
  234. content:"";
  235. position: absolute;
  236. top:50%;
  237. left:50%;
  238. background:#000;
  239. border:18px solid #fff;
  240. border-radius:100%;
  241. width:12px;
  242. height:12px;
  243. }
  244. </style>
  245. </head>
  247. <body>
  248. <div class="wrap" style="top:30px; left:40px;">
  249. <div class="arrow"></div>
  250. </div>
  251. <div class="wrap" style="top:20px; left:100px;">
  252. <div class="star-six"></div>
  253. </div>
  254. <div class="wrap" style="top:20px; left:200px;">
  255. <div class="star-five"></div>
  256. </div>
  257. <div class="wrap" style="top:20px; left:400px;">
  258. <div class="heart"></div>
  259. </div>
  260. <div class="wrap" style="top:220px; left:100px;">
  261. <div class="infinity"></div>
  262. </div>
  263. <div class="wrap" style="top:220px; left:400px;">
  264. <div class="pacman"></div>
  265. </div>
  266. <div class="wrap" style="top:340px; left:200px;">
  267. <div class="yin-yang"></div>
  268. </div>
  269. </body>
  271. </html>
 
 

【01】CSS制作的图形的更多相关文章

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

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

  2. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

  3. CSS制作图形速查表

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

  4. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

  5. 纯CSS制作冒泡提示框

    来源:http://www.ido321.com/1214.html 前两天翻译了一篇文章,关于利用css的border属性制作基本图形:http://www.ido321.com/1200.html ...

  6. 18个你可能不相信是用CSS制作出来的东西

    与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和交互的能力,CSS集合HTML以及JavaScrip ...

  7. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  8. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  9. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

随机推荐

  1. 关于js-cookie使用出现兼容性问题以及js-cookie的如何使用

    最近使用vue开发的项目,开发过程引入了js-cookie插件,在PC端以及移动端网页调试都没出现问题,但是打包成APP在安卓手机调试发现使用js-cookie保存的数据失效了,然后只能使用local ...

  2. （快排）51NOD 1018 排序

    给出N个整数,对着N个整数进行排序   Input 第1行:整数的数量N(1 <= N <= 50000) 第2 - N + 1行:待排序的整数(-10^9 <= A[i] < ...

  3. [GDOI2014]拯救莫莉斯

    题目描述 莫莉斯·乔是圣域里一个叱咤风云的人物,他凭借着自身超强的经济头脑,牢牢控制了圣域的石油市场. 圣域的地图可以看成是一个n*m的矩阵.每个整数坐标点(x , y)表示一座城市吗,两座城市间相邻 ...

  4. Selenium Grid操作使用指南

    一.实现串行多浏览器执行脚本1.启动selenium-server-standalonejava -jar selenium-server-standalone-2.44.0.jar2.脚本代码 fr ...

  5. js中原型和原型链

    1.原型: 在JavaScript 中,对象被表现为prototype . 原型其实一直存在于我们接触过的任何一个对象. 2. Tip:在函数对象中也存在__proto__属性,但是查看函数对象的原型 ...

  6. WinRT ListView间隔变色(二)

    上文说到,WinRt中,我们不能在Style的Setter使用Binding.这个问题其实从SL5之前,一直都不可以.但是,为了使用强大的Binding,人们也一直想使用各种方法来达到Binding ...

  7. HDU_1233_还是畅通工程

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  8. Call stack-函数调用栈

    https://en.wikipedia.org/wiki/Call_stack#STACK-FRAME In computer science, a call stack is a stack da ...

  9. C# 字符串每隔两个 提取

    private void button3_Click(object sender, EventArgs e) { StringBuilder sb = new StringBuilder(); str ...

  10. 用Java实现在【520,1314】之间生成随机整数的故事

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 在未来城市工作的的程序员小木,做了一个梦,梦到自己在塔鲁姆的街道上看到一个姑娘,这个姑娘从远处走向他,脸上带着微笑.让小木 ...