zoukankan      html  css  js  c++  java

  • 【01】CSS制作的图形

    【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>
     
     





     
  • 相关阅读:
    逆向笔记
    后缀名验证
    hook 虚表
    findhex
    敏捷开发模式下如何划定测试范围
    通过数据库来看互联网系统架构演变
    论技术人的总结习惯
    08.基于IDEA+Spring+Maven搭建测试项目--Maven的配置文件settings.xml
    07.基于IDEA+Spring+Maven搭建测试项目--logback.xml配置
    06.基于IDEA+Spring+Maven搭建测试项目--dubbo-consumer.xml配置
  • 原文地址：https://www.cnblogs.com/moyuling/p/4971108.html
Copyright © 2011-2022 走看看