【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. Linux的文件搜索命令（locate ,find,grep，find命令和）

    刚开始学Linux,这是关于Linux文件搜索命令,就目前,尽我所能把他写全一点,后期随时补充 文件搜索命令 一.locate命令 二.find命令 三.grep命令 四.find命令和grep命令的 ...

  2. JVM系列-类加载机制

    简介 在java中,类的声明周期总共分为以下几种: 加载(Loading),验证(Verification),准备(Preparation),解析(Analysis), 初始化(Initializat ...

  3. MySQL 备份和恢复数据

    备份指定数据库的全部表或指定表 mysqldump -u user -h localhost -p [password] db_name[ tbl_name[,tbl_name.......]]> ...

  4. Commons-FileUpload 文件上传(模板)

    // 创建FileItem工厂函数 FileItemFactory FIF = new DiskFileItemFactory(); // 获取ServletFileUpload对象,使用工厂实例传入 ...

  5. 个人微信号二次开发SDK协议，个人微信号二次开发api接口

    通过这个API接口可以做什么? 通过我们提供的API接口您可以开发: 工作手机(如:X创,X码,XX管家等) 微信群讲课软件(如:讲课X师,一起X堂等) 微信社群管理软件(如:小X管家,微X助手等) ...

  6. 设计模式 | 组合模式（composite）

    定义: 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有一致性. 结构:(书中图,侵删) 一个Component接口:定义统一的方法 若干树枝(Com ...

  7. vux修改css样式的2种办法

      最近手上有个移动端的项目.前端UI框架是选择的VUX.但是在使用的时候经常会发现框架自带的组件样式和我们要求的不一致.经常需要手动覆盖样式.这里记录下我们使用的2种方法. 我们以XHeader组件 ...

  8. ORA-01654_TableSpace空间不足问题处理

    操作环境:Windows Server 2008 R2,32位Oracle11g R2. 导入大批量数据时报如下错误信息: ORA-: 索引IOT.IDX_IOT_EQUIP_ID无法通过1024(在 ...

  9. [转]我要学ASP.NET MVC 3.0（十二）： MVC 3.0 使用自定义的Html控件

    本文转自:http://www.cnblogs.com/lukun/archive/2011/08/05/2128693.html 概述   在ASP.NET MVC框架中已经封装了很多基于Html标 ...

  10. Scala-基础-数组(1)

    import junit.framework.TestCase import scala.collection.mutable.ArrayBuffer; //数组(1) //知识点-定义数组,变长数组 ...