Tạo đường chéo bằng CSS

Một trong những tính năng nổi bật nhất của CSS3 là giảm sử dụng hình ảnh cho thiết kế web và có thể tạo ra các hình khối. Trong bài viết này chúng ta sẽ học cách tạo ra hình tròn, vuông, tam giác, ngôi sao hay thậm chí cả hình Pacman bằng CSS thuần túy.

Tạo đường chéo bằng CSS

Những gì bạn cần để hoàn thành hướng dẫn này

  • Kiến thức về CSS3.
  • Thời gian và sự kiên nhẫn.

Tạo hình tròn

Tạo đường chéo bằng CSS

HTML

Để tạo hình tròn, đầu tiên chúng ta cần một thẻ

2 có ID là tên của hình khối cần tạo. Ví dụ ở đây, đặt
3 là tên ID.

CSS

Ở phần CSS, đặt

4,
5 (bằng nhau để có hình vuông) với
6 bằng 1/2 chiều cao và chiều rộng.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}

Tạo hình vuông

Tạo đường chéo bằng CSS

HTML

Tương tự như hình tròn, đặt ID cho

2 là
8.

CSS

CSS chỉ đơn giản là

4 và
5 bằng nhau.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}

Tạo hình chữ nhật

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

CSS

CSS sẽ như sau.

#rectangle {
    width: 220px;
    height: 120px;
    background: #4da1f7;
}

Tạo hình Oval

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

CSS

CSS sẽ như sau.

#oval {
    width: 200px;
    height: 100px;
    background: #e9337c;
    -webkit-border-radius: 100px / 50px;
    -moz-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

Tạo hình tam giác

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

CSS

CSS sẽ như sau.

#triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}

Tạo hình tam giác hướng xuống

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
0

CSS

CSS sẽ như sau.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
1

Tạo tam giác hướng qua trái

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
2

CSS

CSS sẽ như sau.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
3

Tạo tam giác hướng qua phải

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
4

CSS

CSS sẽ như sau.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
5

Tạo khối kim cương

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
6

CSS

CSS sẽ như sau.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
7

Tạo hình thang

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
8

CSS

CSS sẽ như sau.

#circle {
    width: 120px;
    height: 120px;
    background: #7fee1d;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
}
9

Tạo hình bình hành

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

0

CSS

CSS sẽ như sau.

1

Tạo ngôi sao

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

2

CSS

CSS sẽ như sau.

3

Tạo ngôi sao 6 cánh

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

4

CSS

CSS sẽ như sau.

5

Tạo hình ngũ giác

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

6

CSS

CSS sẽ như sau.

7

Tạo hình lục giác

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

8

CSS

CSS sẽ như sau.

9

Tạo hình bát giác

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
0

CSS

CSS sẽ như sau.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
1

Tạo hình trái tim

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
2

CSS

CSS sẽ như sau.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
3

Tạo hình quả trứng

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
4

CSS

CSS sẽ như sau.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
5

Tạo biểu tượng vô cực

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
6

CSS

CSS sẽ như sau.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
7

Tạo bong bóng bình luận

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
8

CSS

CSS sẽ như sau.

#square {
    width: 120px;
    height: 120px;
    background: #f447ff;
}
9

Tạo biểu tượng Pacman

Tạo đường chéo bằng CSS

HTML

Tương tự hình trên.

0

CSS

CSS sẽ như sau.

1

Kết

Bên trên là rất nhiều hình khối tạo bằng CSS thay cho hình ảnh trên website để giảm bớt request và dung lượng tải xuống, vì ngày nay hầu hết trình duyệt đều hỗ trợ CSS3.