CSS邊角摺疊實戰

時間 2019-11-18

標籤 css 邊角摺疊實戰欄目 CSS 简体版

原文原文鏈接

在大量的網頁設計做品中，都用到了這種摺疊效果，一般用於標題背景。通常能夠用PhotoShop來實現這樣的效果，可是在當今普遍提倡減小網頁圖片使用量的狀況下，咱們仍是少用圖片爲好。其實使用CSS是能夠很容易地實現這種效果的，廢話少說，直接上代碼： css

01	<!DOCTYPE html>

02	<html xmlns="http://www.w3.org/1999/xhtml">

03

 <head> 

04	<meta charset="utf-8">

05	<title>CSS Shapes</title>

06	<style type="text/css">

07

 <!-- 

08	#container {

09	background: #666;

10	margin: auto;

11	width: 500px;

12	height: 700px;

13	padding-top: 30px;

14

}

15

 h1 { 

16	background: #e3e3e3;

17	background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);

18	background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));

19	padding: 10px 20px;

20	margin-left: -20px;

21	margin-top: 0;

22	position: relative;

23	width: 70%;

24	-moz-box-shadow: 1px 1px 3px #292929;

25	-webkit-box-shadow: 1px 1px 3px #292929;

26	box-shadow: 1px 1px 3px #292929;

27	color: #454545;

28	text-shadow: 0 1px 0 white;

29

}

30

 .arrow { 

31

     width: 0; 

32	height: 0;

33	line-height: 0;

34	border-left: 20px solid transparent;

35	border-top: 10px solid #c8c8c8;

36	top: 104%;

37

     left: 0; 

38	position: absolute;

39

}

40

-->

41

 </style> 

42	<!--[if IE]>

43

 <style> 

44

 .arrow { 

45	top: 100%;

46

}

47

 </style> 

48	<![endif]-->

49

 </head> 

50

51

 <body> 

52	<div id="container">

53	<h1> 個人標題 <span class="arrow"></span> </h1>

54

 </div> 

55

 </body> 

56

 </html> 

點此能夠預覽以上代碼的運行結果，可能IE下的效果比較單調，再次鄙視IE。這裏的關鍵技術是class="arrow"這個類，它產生了一個三角形狀，讓你看起來就像是一條帶子被摺疊了同樣，控制這個類的CSS代碼爲：

01

 .arrow { 

02

     width: ; 

03

     height: ; 

04	line-height: ;

05	border-left: 20px solid transparent;

06	border-top: 10px solid #c8c8c8;

07	top: 104%;

08

     left: ; 

09	position: absolute;

10

}

這其中關鍵的屬性是border-left 和 border-top，這兩個屬性造成了一個三角形效果，也就是帶子的拐角效果，你能夠將以上代碼的五、6行，作以下更改，看看效果： html

1	border-right: 20px solid transparent;

2	border-top: 10px solid #c8c8c8;

再作一次更改，看看什麼效果： web

1	border-left: 20px solid transparent;

2	border-bottom: 10px solid #c8c8c8;

經過這幾回更改，你能夠看到，border-right、border-left和border-bottom、border-top的不一樣組合，能夠實現三角形的不一樣的朝向，你能夠觸類旁通製做你的摺疊效果了。 spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。