Skip to content

Commit ea97b37

Browse files
feleventhfeleventh
committed
blog
blog
1 parent 321310a commit ea97b37

2 files changed

Lines changed: 186 additions & 1 deletion

File tree

‎_posts/2016-9-30-CSS制作任意角度三角形及其应用.md‎

Lines changed: 186 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ color: '#632321'
88
tags:
99
- "css3几何形状"
1010
twitter_text: "使用CSS制作任意角度三角形原理及其应用"
11-
introduction: "使用CSS制作任意角度三角形原理及其应用"
11+
introduction: "使用CSS制作任意角度三角形原理及其应用,在bootstrap的样式表中有一个三角形类caret,弄清其原理后，我们也能制作各种三角形，并应用到网页的具体内容中。"
1212
---
1313

1414
在前面有篇博客，我介绍了[使用css3 transform的skew变形来制作平行四边形](//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/)。
@@ -117,8 +117,193 @@ AD=CD/tan(a), BD=cd/tan(b)，这样我们就能计算出其他两个边框的宽
117117
})
118118
</script>
119119
```
120+
120121
### css三角形的几种应用
121122

122123
虽然我们可以使用css写出各式各样的三角形，但在网页中使用最多的是等腰三角形、特别是等腰直角三角形。
124+
如下图，对话框、弹出框等等都有使用css三角形作为指向箭头，css三角形也可以制作金字塔、步骤图等表现形式。
125+
![css三角形的几种应用](../assets/img/2016-9-30-4.jpg)
126+
核心代码如下：
123127

128+
```html
129+
<div class="card">
130+
<div class="card-header">css三角形的几种应用</div>
131+
<div class="card-content">
132+
<div class="example">
133+
<h3>指向框的指示箭头</h3>
134+
<div class="dialog-box-1">我像微信对话框吗？</div>
135+
<div class="dialog-box-2">不知道！哈哈！</div>
136+
</div>
137+
<div class="example">
138+
<h3>组合成其他形状</h3>
139+
<div class="pyramid">
140+
<div class="layer-1">hello</div>
141+
<div class="layer-2">world</div>
142+
<div class="layer-3">this is a pyramid</div>
143+
</div>
144+
<div class="progress">
145+
<div class="stage-1">需求</div>
146+
<div class="stage-2">设计</div>
147+
<div class="stage-3">开发</div>
148+
<div class="stage-4">测试</div>
149+
<div class="stage-5">部署</div>
150+
</div>
151+
</div>
152+
</div>
153+
</div>
154+
<!-- scss代码如下 -->
155+
.dialog-box-1{
156+
background-color: lighten(green,10%);
157+
padding: 8px;
158+
border-radius: 5px;
159+
position: relative;
160+
float: left;
161+
margin-left: 20px;
162+
color: #fff;
163+
&::after{
164+
display: block;
165+
position: absolute;
166+
content: '';
167+
top: 9px;
168+
left: -10px;
169+
border-top: 10px solid transparent;
170+
border-right: 18px solid lighten(green,10%);
171+
border-bottom: 10px solid transparent;
172+
}
173+
}
174+
.dialog-box-2{
175+
border: 3px solid lighten(green,10%);
176+
padding: 5px;
177+
border-radius: 5px;
178+
position: relative;
179+
float: right;
180+
margin-right: 20px;
181+
&::before{
182+
display: block;
183+
position: absolute;
184+
content: '';
185+
top: 10px;
186+
right: -13px;
187+
border-top: 6px solid transparent;
188+
border-left: 10px solid lighten(green,10%);
189+
border-bottom: 6px solid transparent;
190+
}
191+
&::after{
192+
display: block;
193+
position: absolute;
194+
content: '';
195+
top: 6px;
196+
right: -7px;
197+
border-top: 10px solid transparent;
198+
border-left: 18px solid #fff;
199+
border-bottom: 10px solid transparent;
200+
}
201+
}
202+
$yellow: #ffef79;
203+
.caret{
204+
display: block;
205+
content: '';
206+
width: 0;
207+
height: 0;
208+
position: absolute;
209+
}
210+
.pyramid{
211+
width: 300px;
212+
margin: 0 auto;
213+
&>*{
214+
background: $yellow;
215+
height: 30px;
216+
margin: 0 auto 10px;
217+
padding-top: 20px;
218+
position: relative;
219+
text-align: center;
220+
line-height: 30px;
221+
}
222+
@for $i from 1 through 3 {
223+
.layer-#{$i} {
224+
width: 100px * $i;
225+
&::before{
226+
@extend .caret;
227+
top: 0;
228+
left: 0;
229+
border-top: 25px solid #fff;
230+
border-left: 25px solid #fff;
231+
border-bottom: 25px solid transparent;
232+
border-right: 25px solid transparent;
233+
}
234+
&::after{
235+
@extend .caret;
236+
top: 0;
237+
right: 0;
238+
border-top: 25px solid #fff;
239+
border-right: 25px solid #fff;
240+
border-bottom: 25px solid transparent;
241+
border-left: 25px solid transparent;
242+
}
243+
}
244+
}
245+
}
246+
.progress{
247+
width: 310px;
248+
margin: 30px auto 0;
249+
height: 40px;
250+
line-height: 40px;
251+
&>*{
252+
float: left;
253+
position: relative;
254+
margin-right: 20px;
255+
}
256+
.stage-1{
257+
background: $yellow;
258+
padding-left: 5px;
259+
color: #333;
260+
&::after{
261+
@extend .caret;
262+
top: 0;
263+
right: -11.55px;
264+
border-left: 11.55px solid $yellow;
265+
border-top: 20px solid transparent;
266+
border-bottom: 20px solid transparent;
267+
}
268+
}
269+
.stage-5{
270+
background: darken($yellow, 50%);
271+
padding-left: 15px;
272+
padding-right: 5px;
273+
color: lighten(#333, 60%);
274+
&::before{
275+
@extend .caret;
276+
top: 0;
277+
left: 0;
278+
border-left: 11.55px solid #fff;
279+
border-top: 20px solid transparent;
280+
border-bottom: 20px solid transparent;
281+
}
282+
}
283+
@for $j from 2 through 4{
284+
.stage-#{$j}{
285+
background: darken($yellow, 10% * $j);
286+
color: lighten(#333, 12% * $j);
287+
padding-left: 15px;
288+
&::after{
289+
@extend .caret;
290+
top: 0;
291+
right: -11.55px;
292+
border-left: 11.55px solid darken($yellow, 10% * $j);
293+
border-top: 20px solid transparent;
294+
border-bottom: 20px solid transparent;
295+
}
296+
&::before{
297+
@extend .caret;
298+
top: 0;
299+
left: 0;
300+
border-left: 11.55px solid #fff;
301+
border-top: 20px solid transparent;
302+
border-bottom: 20px solid transparent;
303+
}
304+
}
305+
}
306+
}
307+
```
124308

309+
### 完整源代码请查看我的github的[blogDemo项目](//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/)

‎assets/img/2016-9-30-4.jpg‎

45 KB
Loading

0 commit comments

Comments
 (0)