【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. CodeForces 731C Socks (DFS或并查集)

    题意:有n只袜子,k种颜色,在m天中,问最少修改几只袜子的颜色,可以使每天穿的袜子左右两只都同颜色. 析:很明显,每个连通块都必须是同一种颜色,然后再统计最多颜色的就好了,即可以用并查集也可以用DFS ...

  2. bzoj 1574: [Usaco2009 Jan]地震损坏Damage【dfs】

    和March的那道不一样,只是非常单纯的带着贪心的dfs 首先一个点被隔断,与它相邻的所有点也会被隔断,打上删除标记,从1dfs即可 #include<iostream> #include ...

  3. P3207 [HNOI2010]物品调度

    传送门 完了题目看错了--还以为所有的\(x,y\)都要一样--结果题解都没看懂-- 先考虑如果已经求出了所有的\(pos\)要怎么办,那么我们可以把\(0\)也看做是一个箱子,然后最后每个箱子都在一 ...

  4. jQuery插件之jqzoom的使用和参数设置

    jqzoom是一款基于jQuery的图片方法插件. 使用方法:1.引入jQuery与jqzoom,jqzoom.css 2.准备两张一大一小大小相同的图片,小图片放在<img>标签的&qu ...

  5. Classic BADI总结

    这里对sap Classic Badi 做一下总结,虽然已经是过时的技术了. Classic BADI的创建 Classic BADI的实施 Classic BADI的调用及运行原理 New BADI ...

  6. Android 性能优化（10）网络优化（ 6）Optimizing General Network Use

    Optimizing General Network Use This lesson teaches you to Compress Data Cache Files Locally Optimize ...

  7. msxml3.dll 错误 '800c0005' 系统错误: -2146697211。

    asp网站 因为这个问题,困扰自己好多次,还重装过两次服务器系统,非常的麻烦,这次终于找到了问题所在,记录下来,方便以后查看. 服务器症状: 1.服务器上的IE浏览器不能访问外网: 2.set htt ...

  8. Java常见面试问题: equals()与hashCode()的使用

    目录 1 equals()与'=='的区别 2 equals()方法的重写规则 3 为什么重写equals()的同时还需要重写hashCode() 4 JDK 7中对hashCode()方法的改进 5 ...

  9. LN : leetcode 399 Evaluate Division

    lc 399 Evaluate Division 399 Evaluate Division Equations are given in the format A / B = k, where A ...

  10. Angular——作用域

    基本介绍 应用App是无法嵌套的,但是controller是可以嵌套的,每个controller都会对应一个模型(model)也就是$scope对象,不同层级的controller下的$scope遍产 ...