纯CSS图形

1.心形

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>xin</title>
 6 <style type="text/css">
 7 #myt{
 8 width: 800px;
 9 height: 350px;
10 margin: auto;
11 position: relative;
12 }
13 #heart{
14 width: 350px;
15 height: 500px;
16 position: relative;
17 }
18 #heart:before,#heart:after{
19 content: "";
20 width: 150px;
21 height: 225px;
22 background: red;
23 position: absolute;
24 left: 150px;
25 top: 80px;
26 border-radius: 75px 75px 0 0;
27 -moz-border-radius: 75px 75px 0 0;
28 transform:rotate(-45deg);
29 -webkit-transform:rotate(-45deg);
30 -moz-transform:rotate(-45deg);
31 -ms-transform:rotate(-45deg);
32 -o-transform:rotate(-45deg);
33 transform-origin:0% 100%;
34 -webkit-transform-origin:0% 100%;
35 -moz-transform-origin:0% 100%;
36 -ms-transform-origin:0% 100%;
37 -o-transform-origin:0% 100%;
38 }
39 #heart:after{
40 left: 0;
41 transform:rotate(45deg);
42 -webkit-transform:rotate(45deg);
43 -moz-transform:rotate(45deg);
44 -ms-transform:rotate(45deg);
45 -o-transform:rotate(45deg);
46 transform-origin:100% 100%;
47 -webkit-transform-origin:100% 100%;
48 -moz-transform-origin:100% 100%;
49 -ms-transform-origin:100% 100%;
50 -o-transform-origin:100% 100%;
51 }
52 </style>
53 </head>
54 <body>
55 <div id="myt">
56 <div id="heart"></div>
57 </div>
58 </body>
59 </html>

2.六角星

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>6-star</title>
 6 <style type="text/css">
 7 #sixStar{
 8 width: 800px;
 9 height: 800px;
10 position: relative;
11 }
12 #sixStar:before,#sixStar:after{
13 content: "";
14 width: 0;
15 height: 0;
16 position: absolute;
17 left: 0;
18 border-left: 100px solid transparent;
19 border-right: 100px solid transparent;
20 }
21 #sixStar:before{
22 top: 58px;
23 border-top: 173px solid #9de;
24 }
25 #sixStar:after{
26 top: 0px;
27 border-bottom: 173px solid #9de;
28 }
29 </style>
30 </head>
31 <body>
32 <div id="sixStar"></div>
33 </body>
34 </html>

3.五角星

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>5-star</title>
 6 <style type="text/css">
 7 #fiveStar {
 8 margin: 50px 0;
 9 position: relative;
10 display: block;
11 color: red;
12 width: 0px;
13 height: 0px;
14 top: 15px;
15 border-right: 100px solid transparent;
16 border-bottom: 70px solid red;
17 border-left: 100px solid transparent;
18 -moz-transform: rotate(35deg);
19 -webkit-transform: rotate(35deg);
20 -ms-transform: rotate(35deg);
21 -o-transform: rotate(35deg);
22 }
23 #fiveStar:before {
24 border-bottom: 80px solid red;
25 border-left: 30px solid transparent;
26 border-right: 30px solid transparent;
27 position: absolute;
28 height: 0;
29 width: 0;
30 top: -45px;
31 left: -65px;
32 display: block;
33 content: ‘‘;
34 -webkit-transform: rotate(-35deg);
35 -moz-transform: rotate(-35deg);
36 -ms-transform: rotate(-35deg);
37 -o-transform: rotate(-35deg);
38
39 }
40 #fiveStar:after {
41 position: absolute;
42 display: block;
43 color: red;
44 top: 3px;
45 left: -105px;
46 width: 0px;
47 height: 0px;
48 border-right: 100px solid transparent;
49 border-bottom: 70px solid red;
50 border-left: 100px solid transparent;
51 -webkit-transform: rotate(-70deg);
52 -moz-transform: rotate(-70deg);
53 -ms-transform: rotate(-70deg);
54 -o-transform: rotate(-70deg);
55 content: ‘‘;
56 }
57 </style>
58 </head>
59 <body>
60 <div id="fiveStar"></div>
61 </body>
62 </html>

4.五边形

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>5-edge</title>
 6 <style type="text/css">
 7 #pentagon {
 8 position: relative;
 9 width: 54px;
10 top: 50px;
11 left: 30px;
12 border-width: 50px 18px 0;
13 border-style: solid;
14 border-color: red transparent;
15 }
16 #pentagon:before {
17 content: "";
18 position: absolute;
19 height: 0;
20 width: 0;
21 top: -85px;
22 left: -18px;
23 border-width: 0 45px 35px;
24 border-style: solid;
25 border-color: transparent transparent red;
26 }
27 </style>
28 </head>
29 <body>
30 <div id="pentagon"></div>
31 </body>
32 </html>

5.六边形

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>6-edge</title>
 6 <style type="text/css">
 7 #hexagon {
 8 width: 100px;
 9 height: 55px;
10 background: red;
11 position: relative;
12 top:50px;
13 left: 50px;
14 }
15 #hexagon:before {
16 content: "";
17 position: absolute;
18 top: -25px;
19 left: 0;
20 width: 0;
21 height: 0;
22 border-left: 50px solid transparent;
23 border-right: 50px solid transparent;
24 border-bottom: 25px solid red;
25 }
26 #hexagon:after {
27 content: "";
28 position: absolute;
29 bottom: -25px;
30 left: 0;
31 width: 0;
32 height: 0;
33 border-left: 50px solid transparent;
34 border-right: 50px solid transparent;
35 border-top: 25px solid red;
36 }
37 </style>
38 </head>
39 <body>
40 <div id="hexagon"></div>
41 </body>
42 </html>

6.八边形

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>octagon</title>
 6 <style type="text/css">
 7 #octagon {
 8 width: 100px;
 9 height: 100px;
10 top:50px;
11 left: 50px;
12 background: red;
13 position: relative;
14 }
15
16 #octagon:before {
17 content: "";
18 position: absolute;
19 top: 0;
20 left: 0;
21 border-bottom: 29px solid red;
22 border-left: 29px solid #eee;
23 border-right: 29px solid #eee;
24 width: 42px;
25 height: 0;
26 }
27
28 #octagon:after {
29 content: "";
30 position: absolute;
31 bottom: 0;
32 left: 0;
33 border-top: 29px solid red;
34 border-left: 29px solid #eee;
35 border-right: 29px solid #eee;
36 width: 42px;
37 height: 0;
38 }
39 </style>
40 </head>
41 <body>
42 <div id="octagon"></div>
43 </body>
44 </html>

时间： 2024-10-13 12:03:35

纯CSS图形的相关文章

CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形最终效果: CSS代码如下: 复制代码代码如下: #square { width: 100px; height: 100px; background: red; }

纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

今天在css-tricks上看到一篇文章,那篇文章让我不禁心头一震,强大的CSS啊,居然能画出这么多基本的图形.图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome,当然IE也能看一部分的.那好,下面就一起来看看我们是如何用纯CSS来画这些图形的,如果你也觉得很震撼,推荐给你的朋友吧. 1.正方形最终效果: CSS代码如下: 1 #square {

史上最强大的40多个纯CSS绘制的图形

今天在国外的网站上看到了很多看似简单却又非常强大的纯 CSS 绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square (正方形) #square { width: 100px; height: 100px; background: red; } Rectangle (矩形) #rectangle { width: 200px; height: 100px; background: red; } Circle (圆形

好程序员web前端学习路线分享纯css绘制各种图形

好程序员web前端学习路线分享纯css绘制各种图形,很多时候,UI设计师为了页面的好看,都会采用很多图形去做装饰,比如三角形.矩形.圆形.椭圆形.对话泡泡等,让整个页面看起来不会太单调.作为前端开发更多的时候,会采用比较快捷的实现方式就是用图片或者背景图来实现页面效果,但是有一个很大的问题就是图片可能会失真,有些情况也会发现用图片或者背景图去实现效果灵活度也不够.那么如果不用图片,用纯CSS也是可以绘制各种图形的,很多人都以为css只能写一些简单的图形,比如长方形.正方形.圆形.椭圆,其实不然,

一个标签的72变，打造一个纯CSS图标库

每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不甚满意. 终于下定心思来改造一个可缩放的图标库.github先上:https://github.com/qieguo2016/iconoo,目前提供下载link标签引入和npm+webpack的引入方式,详见项目的readme.(喂,求star!) 关于改造,一开始的想法就是使用百分比尺寸来改造,然

三角形变形记之纯css实现的分布导航条效果

三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-size:13px; font-weight:bold; } li { float:left; position:relative; line-height:30px; background:#9BBB38; color:#fff; width:100px; height:30px; text-align:cen

奇妙的 CSS shapes(CSS图形)

CSS 发展到今天已经越来越强大了.其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到.今天就向大家介绍几个比较新的强大的 CSS 功能: clip-path shape-outside shape 的意思是图形,CSS shapes 也就是 CSS 图形的意思,也就是使用 CSS 生成各种图形(圆形.矩形.椭圆.多边形等几何图形). CSS3之前,我们能做的只有矩形,四四方方,条条框框. CSS3 CSS3出来后,我们有了更广阔的施展空间,通过 border-radius bo

纯CSS写三角形-border法[基础篇]

纯CSS写三角形-border法[基础篇] 注意:所有知识点将不考虑IE6 (￣▽￣") 在制作如上图所示的三角形时,我们基本采用PNG或GIF图片来实现,这种形式在编写代码时较容易掌握,所以得到普遍制作者的认可.但涉及到后期优化维护的话,就需要不断的修改图片,在图形编辑器和代码编辑器之间来回切换,这无疑是加大了工作量.所以,如果单纯利用CSS来写的话,不但可以减少网站零碎图片的数量.减少了加载图片的时间,而且在修改时不用再重新切图,减少工作量. CSS3出现以后,“方形旋转45度”制作三角形的

纯CSS实现动态晴阴雨雪

1 引言本期分享一下如何仅用CSS3,实现单标签的动态晴阴雨雪.技术关键点就是"单标签"和"纯CSS".先看下最终效果: 再看看HTML代码:  <div class="weather sunny"></div>  <div class="weather cloudy"></div>  <