About Me

Ấn tượng với cách tạo hình từ thuộc tính CSS border

Có lẽ có rất nhiều bạn chỉ sử dụng CSS border dùng để tạo các đường viền cho các đối tượng. Tuy nhiên, ngoài việc tạo đường viền ra, thì chúng ta còn có thể tận dụng css border cho việc tạo các hình thù khác nhau, như hình tam giác, hình vuông, hình mũi tên…
css-border-shape
Nếu các bạn còn chưa tin, thì mời xem qua những đoạn css dùng để tạo hình như sau :
Up side Triangle:
triangle_up
1
2
3
4
5
6
7
.triangle_up
{
  height:0px; width:0px;
  border-bottom:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}
Down side Triangle:
triangle_down
1
2
3
4
5
6
7
.triangle_down
{
  height:0px; width:0px;
  border-top:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}
Left side Triangle:
triangle_left
1
2
3
4
5
6
7
8
.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  float:left;
}
Right side Triangle:
triangle_right
1
2
3
4
5
6
7
.triangle_right
{
  height:0px; width:0px; float:left;
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}
Cross Square:
crossSquare
1
2
3
4
5
6
7
8
.crossSquare
{
  height:0px; width:0px;
  border-right:50px solid blue;
  border-top:50px solid gray;
  border-bottom:50px solid red;
  border-left:50px solid yellow;
}
Để sử dụng các đoạn css bên trên, các bạn chỉ cần dùng các thẻ như span hay div và chèn vào các class tương ứng.
1
2
3
</pre>
<div class="crossSquare"></div>
<pre>
Ngoài những hình cơ bản bên trên chúng ta còn có thể tạo ra các hình mũi tên như sau :
arrow-leftarrow-right
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.arrowLine
{
  background-color:#006633;
  border-bottom:0 solid transparent;
  border-top:0 solid transparent;
  height:100px;
  width:50px;
  float:left;
}
.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  float:left;
}
.triangle_right
{
  height:0px; width:0px; float:left;
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}
Và đoạn HTML để dùng như sau :
1
2
3
4
5
6
7
8
9
<div class="arrow">
  <div class="triangle_right"></div>
  <div class="arrowLine"></div>
</div>
<div class="arrow">
  <div class="arrowLine"></div>
  <div class="triangle_left"></div>
</div>
Hoặc phức tạp hơn như hình này :
Logo
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.delociousLogo
{
  height:100px; width:100px;
}
.topleft
{
  height:0px; width:0px;
  border-top:50px solid #FFFFFF;
  border-right:0px solid #FFFFFF;
  border-bottom:0px solid #FFFFFF;
  border-left:50px solid #FFFFFF;
  float:left;
}
.topright
{
  float:left;
  height:0px; width:0px;
  border-top:50px solid #0000CC;
  border-right:0px solid #0000CC;
  border-bottom:0px solid #0000CC;
  border-left:50px solid #0000CC;
}
.bottomleft
{
  float:left;
  height:0px; width:0px;
  border-top:50px solid #000000;
  border-right:0px solid #000000;
  border-bottom:0px solid #000000;
  border-left:50px solid #000000;
}
.bottomright
{
  float:left;
  height:0px; width:0px;
  border-top:50px solid #999999;
  border-right:0px solid #999999;
  border-bottom:0px solid #999999;
  border-left:50px solid #999999;
}
HTML code
1
2
3
4
5
6
<div class="delociousLogo">
  <div class="topleft"></div>
  <div class="topright"></div>
  <div class="bottomleft"></div>
  <div class="bottomright"></div>
</div>
Các bạn thấy đó, không có gì là giới hạn, chỉ có trí tưởng tượng và sáng tạo của chúng ta là có giới hạn thôi. Vì thế đừng bao giờ ngừng tìm hiểu và sáng tạo nhé, chúc các bạn có thể tự tay tạo ra các hình thù khác nữa, và nhớ là chia sẻ cho mình và mọi người biết nhé.
Nguồn: http://www.thuthuatweb.net/

Bình luận

Mới hơn Cũ hơn

Ads