【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. javascript实现继承的4种方法，以及它们的优缺点

    1. 原型链继承(有缺陷): 缺陷1:切断了Zi.prototype.constructor与Zi的关系 缺陷2:原型链上的引用类型的数据会被所有实例共享 2. 构造函数继承(有缺陷): 缺陷1:Fu ...

  2. C++ 类中的3种权限作用范围

    三种访问权限 public:可以被任意实体访问 protected:只允许子类及本类的成员函数访问 private:只允许本类的成员函数访问 #include <iostream> #in ...

  3. [转]C语言字符串操作总结大全(超详细)

    1)字符串操作 strcpy(p, p1) 复制字符串 strncpy(p, p1, n) 复制指定长度字符串 strcat(p, p1) 附加字符串 strncat(p, p1, n) 附加指定长度 ...

  4. [Usaco2018 Open]Disruption

    Description Farmer John自豪于他所经营的交通发达的的农场.这个农场是由N块牧场(2≤N≤50,000)组成的,N-1条双向道路将它们连接起来,每一条道路的都为一单位长度.Farm ...

  5. 10046 trace and sql

    1.   SQLT 下载 从metalink上下载SQLT工具,参考文档 (以下大部分(SQL可以在sqlt\utl 目录下找到)) 1.1 SQLT 安装 SQLT安装在自己的schema SQLT ...

  6. 记录sql操作

    需求:一个a表的A列等于b表的B列 但拥有的相同列C列值不相同 需要将其改成一样的 UPDATE vd_auth_switch vas,tb_student ts set vas.class_id = ...

  7. connection failed to http://nssa-sensor3:11000/oozie/?user.name=oozie(<urlopen erroer Errno 111] Connection refused>)解决办法（图文详解）

    不多说,直接上干货! 解决办法 Copy/Paste oozie.services property tag set from oozie-default.xml to oozie-site.xml. ...

  8. 实现div左右上下都居中

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

  9. 语义分割：使用关系图辅助图像分割-Capsule Network、IceNet

    文章:欲取代CNN的Capsule Network究竟是什么来头?它能为AI界带来革命性转折么? 文章:用于分类.检测和分割的移动网络 MobileNetV2 网络 文章:后RCNN时代的物体检测及分 ...

  10. LPSTR LPCTSTR

    UNICODE:它是用两个字节表示一个字符的方法.比如字符'A'在ASCII下面是一个字符,可'A'在UNICODE下面是两个字符,高字符用0填充,而且汉字'程'在ASCII下面是两个字节,而在UNI ...