The Shapes of CSS – Tạo các khối hình học bằng CSS

Lục Đức Thành

Hôm nay trong lúc lên mạng search thử từ khóa "Triangle CSS" xem có gì hay ho không, tôi đã bắt gặp bài viết này, xin được chia sẻ lại với các bạn. Hi vọng nó sẽ giúp bạn hiểu hơn về cách tạo ra một số hình khối hình học bằng CSS. Chắc chắn bạn sẽ phải thích thú, ngạc nhiên bởi có rất nhiều hình "kỳ quái" lại có thể tạo ra được chỉ bằng CSS3 như: Hình tròn, hình oval, hình quả trứng, hình trái tim, trăng khuyết, ruy-băng, hình âm-dương, tam giác, ngũ giác, lục giác, bát giác, hình ngôi sao,…

The Shapes of CSS – Tạo các khối hình học bằng CSS

The shapes of css - tạo các khối hình học bằng css

The shapes of css – tạo các khối hình học bằng css

View Demo   Download Files

Một số ví dụ tiêu biểu:

Hình tròn

1
2
3
4
5
6
7
8
9
10

#circle {
	width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}
 
/* Cleaner, but slightly less support: use "50%" as value */

Hình Oval

1
2
3
4
5
6
7
8
9
10

#oval {
	width: 200px;
	height: 100px;
	background: red;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}
 
/* Cleaner, but slightly less support: use "50%" as value */

Hình tam giác

1
2
3
4
5
6
7

#triangle-up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid red;
}

Hình thang

1
2
3
4
5
6
7

#trapezoid {
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	width: 100px;
}

Hình bình hành

1
2
3
4
5
6
7
8

#parallelogram {
	width: 150px;
	height: 100px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	background: red;
}

Hình ngôi sao 5 cánh

1
2
3
4
5
6
7
8
9
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
45
46
47
48
49

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
 
}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

Hình trái tim

1
2
3
4
5
6
7
8
9
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

#heart {
    position: relative;
    width: 100px;
    height: 90px;
}
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

Hình lục giác

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#hexagon {
	width: 100px;
	height: 55px;
	background: red;
	position: relative;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}

Hình trăng khuyết

1
2
3
4
5
6

#moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
}

Xem tất cả các hình: click here

View Demo   Download Files

Theo: css-tricks

Cheers,

The following two tabs change content below.
My Twitter profileMy Facebook profileMy Google+ profileMy YouTube channel

Lục Đức Thành

Giáo viên at FPT Arena
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Các bài viết tương tự:

  1. Image Map Rollover Effect Tutorial with Dreamweaver, CSS3 and jQuery
  2. Tìm hiểu về CSS Triangle bằng hoạt hình
  3. CSS Notification Boxes – Tạo các hộp thông báo đẹp mắt bằng CSS
  4. Tổng hợp một số công cụ tạo mã CSS3 nhanh chóng
  5. Hướng dẫn vẽ hình viên thuốc 3D bằng Adobe Flash CS6
  6. Một số hiệu ứng text-shadow đẹp mắt [Phần 1]
  7. Hướng dẫn chèn HTML5 Video vào trang web bằng Video.JS
  8. Animated scroll to top jQuery Effects

One thought on “The Shapes of CSS – Tạo các khối hình học bằng CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
Website