【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. java笔记线程方式1线程暂停yield

    public static void yield():暂停当前正在执行的线程对象,并执行其他线程. 让多个线程的执行更和谐,但是不能靠它保证一人一次. public class ThreadYield ...

  2. Java 中extends与implements使用方法 （转载）

    转自:http://blog.csdn.net/chen_chun_guang/article/details/6323201 初学Java语言, 代码中的extends和implements让我感到 ...

  3. P2597 [ZJOI2012]灾难（倍增LCA+拓扑排序）

    传送门 据大佬说这玩意儿好像叫灾难树还是灭绝树? 我们先按建图,设点$u$的食物有$x[1]...x[k]$,即在图中这些点都有一条指向它的边 以样例来说,对于人,羊和牛都有一条指向它的边,然而不管是 ...

  4. 自动生成 html5 小页面

    StringBuilder htmltext = new StringBuilder();            try            {                //var readP ...

  5. [Qt Creator 快速入门] 第8章 界面外观

    一个完善的应用程序不仅应该有实用的功能,还要有一个漂亮的外观,这样才能使应用程序更加友好,更加吸引用户.作为一个跨平台的UI开发框架,Qt提供了强大而灵活的界面外观设计机制.这一章将学习在Qt中设计应 ...

  6. Hdu 3487 play the chain

    Description 瑶瑶很喜欢玩项链,她有一根项链上面有很多宝石,宝石从1到n编号. 首先,项链上的宝石的编号组成一个序列:1,2,3,...,n. 她喜欢两种操作: 1.CUT a b c:他会 ...

  7. magento Grid 显示下拉菜单属性

    在使用grid时自己新建了几个属性,然后其中有一个是下拉单,即deal_status protected function _prepareCollection() { $collection = M ...

  8. HTML增加附件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 解决 HTTP Status 500 - Unable to show problem report: freemarker.core.InvalidReferenceException:

    HTTP Status 500 - Unable to show problem report: freemarker.core.InvalidReferenceException: The foll ...

  10. Android Studio 1.5启动出现“SDK Manager: failed to install”问题的解决

    问题描述 Android Studio 1.5是当前最新Android手机应用开发平台,下载bundle版安装后,启动Studio后出现“SDK Manager: failed to install” ...