Skip to content

Commit 653119c

Browse files
feleventhfeleventh
committed
blog css sharp
blog css sharp
1 parent 83eb1ee commit 653119c

3 files changed

Lines changed: 246 additions & 0 deletions

File tree

‎_posts/2016-10-18-css3_sharp.md‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
---
2+
layout: post
3+
title: "使用css3制作各种图形"
4+
categories: javascript
5+
description: "使用css3制作各种图形，如太极图、五角星、吃豆人等等"
6+
main-class: 'dev'
7+
color: '#632321'
8+
tags:
9+
- "jquery轮播"
10+
twitter_text: "使用jquery制作多项轮播插件"
11+
introduction: "使用css3制作各种图形，如太极图、五角星、吃豆人等等"
12+
---
13+
14+
在前面我已经写了俩篇关于css制作图形的博客——[css3实现平行四边形框效果](//feleventh.github.io/css3%E5%AE%9E%E7%8E%B0%E5%B9%B3%E8%A1%8C%E5%9B%9B%E8%BE%B9%E5%BD%A2%E6%A1%86%E6%95%88%E6%9E%9C/)和[CSS制作任意角度三角形及其应用](//feleventh.github.io/CSS%E5%88%B6%E4%BD%9C%E4%BB%BB%E6%84%8F%E8%A7%92%E5%BA%A6%E4%B8%89%E8%A7%92%E5%BD%A2%E5%8F%8A%E5%85%B6%E5%BA%94%E7%94%A8/)。
15+
三角形和平行四边形是网页中进场出现的图形，对于那些不是那么规则的图形往往采用图片的形式来呈现，但是使用css同样来制作出很多不太规则的一些图形，如五角星、太极图、吃豆人等等。
16+
17+
通过使用border的上下左右分别进行不同的设置，以及利用border-radius、box-shadow、transform变形可以将基本的div呈现出各种形状。下面是几个形状的示例：
18+
![css_sharp1](../assets/img/2016-10-18-1.jpg)
19+
![css_sharp2](../assets/img/2016-10-18-2.jpg)
20+
scss样式如下：
21+
22+
```scss样式
23+
.curved-bow{
24+
border: 0 solid transparent;
25+
border-top: 6px solid red;
26+
border-radius: 20px 20px 0px 0px;
27+
width: 40px;
28+
height: 24px;
29+
}
30+
.horn{
31+
border: 0 solid transparent;
32+
border-top: 6px solid red;
33+
border-radius: 20px 0px 0px 0px;
34+
width: 20px;
35+
height: 24px;
36+
}
37+
.curved-arrow {
38+
position: relative;
39+
width: 0;
40+
height: 0;
41+
border-top: 9px solid transparent;
42+
border-right: 9px solid red;
43+
transform: rotate(10deg);
44+
}
45+
.curved-arrow:after {
46+
content: "";
47+
position: absolute;
48+
border: 0 solid transparent;
49+
border-top: 3px solid red;
50+
border-radius: 20px 0 0 0;
51+
top: -12px;
52+
left: -9px;
53+
width: 12px;
54+
height: 12px;
55+
transform: rotate(45deg);
56+
}
57+
.star-five {
58+
margin: 25px 0;
59+
position: relative;
60+
display: block;
61+
color: red;
62+
width: 0px;
63+
height: 0px;
64+
border-right: 50px solid transparent;
65+
border-bottom: 35px solid red;
66+
border-left: 50px solid transparent;
67+
transform: rotate(35deg);
68+
}
69+
70+
.star-five:before {
71+
border-bottom: 40px solid red;
72+
border-left: 15px solid transparent;
73+
border-right: 15px solid transparent;
74+
position: absolute;
75+
height: 0;
76+
width: 0;
77+
top: -23px;
78+
left: -33px;
79+
display: block;
80+
content: '';
81+
transform: rotate(-35deg);
82+
}
83+
.star-five:after {
84+
position: absolute;
85+
display: block;
86+
color: red;
87+
top: 3px;
88+
left: -53px;
89+
width: 0px;
90+
height: 0px;
91+
border-right: 50px solid transparent;
92+
border-bottom: 35px solid red;
93+
border-left: 50px solid transparent;
94+
content: '';
95+
transform: rotate(-70deg);
96+
}
97+
.heart {
98+
position: relative;
99+
width: 50px;
100+
height: 45px;
101+
}
102+
.heart:before,
103+
.heart:after {
104+
position: absolute;
105+
content: "";
106+
left: 25px;
107+
top: 0;
108+
width: 25px;
109+
height: 40px;
110+
background: red;
111+
border-radius: 25px 25px 0 0;
112+
transform: rotate(-45deg);
113+
transform-origin: 0 100%;
114+
}
115+
.heart:after {
116+
left: 0;
117+
transform: rotate(45deg);
118+
transform-origin :100% 100%;
119+
}
120+
121+
.infinity {
122+
position: relative;
123+
width: 106px;
124+
height: 50px;
125+
}
126+
127+
.infinity:before,
128+
.infinity:after {
129+
content: "";
130+
position: absolute;
131+
top: 0;
132+
left: 0;
133+
width: 30px;
134+
height: 30px;
135+
border: 10px solid red;
136+
border-radius: 25px 25px 0 25px;
137+
transform: rotate(-45deg);
138+
}
139+
140+
.infinity:after {
141+
left: auto;
142+
right: 0;
143+
border-radius: 25px 25px 25px 0;
144+
transform: rotate(45deg);
145+
}
146+
.egg {
147+
display:block;
148+
width: 32px;
149+
height: 46px;
150+
background-color: red;
151+
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
152+
}
153+
.pacman {
154+
width: 0px;
155+
height: 0px;
156+
border-right: 30px solid transparent;
157+
border-top: 30px solid red;
158+
border-left: 30px solid red;
159+
border-bottom: 30px solid red;
160+
border-top-left-radius: 30px;
161+
border-top-right-radius: 30px;
162+
border-bottom-left-radius: 30px;
163+
border-bottom-right-radius: 30px;
164+
}
165+
166+
.yin-yang {
167+
width: 96px;
168+
height: 48px;
169+
background: #eee;
170+
border-color: red;
171+
border-style: solid;
172+
border-width: 2px 2px 50px 2px;
173+
border-radius: 100%;
174+
position: relative;
175+
}
176+
.yin-yang:before {
177+
content: "";
178+
position: absolute;
179+
top: 50%;
180+
left: 0;
181+
background: #eee;
182+
border: 18px solid red;
183+
border-radius: 100%;
184+
width: 12px;
185+
height: 12px;
186+
}
187+
.yin-yang:after {
188+
content: "";
189+
position: absolute;
190+
top: 50%;
191+
left: 50%;
192+
background: red;
193+
border: 18px solid #eee;
194+
border-radius:100%;
195+
width: 12px;
196+
height: 12px;
197+
}
198+
199+
.space-invader{
200+
box-shadow:
201+
0 0 0 1em red,
202+
0 1em 0 1em red,
203+
-2.5em 1.5em 0 .5em red,
204+
2.5em 1.5em 0 .5em red,
205+
-3em -3em 0 0 red,
206+
3em -3em 0 0 red,
207+
-2em -2em 0 0 red,
208+
2em -2em 0 0 red,
209+
-3em -1em 0 0 red,
210+
-2em -1em 0 0 red,
211+
2em -1em 0 0 red,
212+
3em -1em 0 0 red,
213+
-4em 0 0 0 red,
214+
-3em 0 0 0 red,
215+
3em 0 0 0 red,
216+
4em 0 0 0 red,
217+
-5em 1em 0 0 red,
218+
-4em 1em 0 0 red,
219+
4em 1em 0 0 red,
220+
5em 1em 0 0 red,
221+
-5em 2em 0 0 red,
222+
5em 2em 0 0 red,
223+
-5em 3em 0 0 red,
224+
-3em 3em 0 0 red,
225+
3em 3em 0 0 red,
226+
5em 3em 0 0 red,
227+
-2em 4em 0 0 red,
228+
-1em 4em 0 0 red,
229+
1em 4em 0 0 red,
230+
2em 4em 0 0 red;
231+
background: red;
232+
width: 1em;
233+
height: 1em;
234+
overflow: hidden;
235+
236+
margin: 50px 0 70px 65px;
237+
}
238+
239+
.moon {
240+
width: 80px;
241+
height: 80px;
242+
margin-bottom: 20px;
243+
border-radius: 50%;
244+
box-shadow: 15px 15px 0 0 red;
245+
}
246+
```

‎assets/img/2016-10-18-1.jpg‎

30.5 KB
Loading

‎assets/img/2016-10-18-2.jpg‎

28.9 KB
Loading

0 commit comments

Comments
 (0)