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.

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

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

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

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

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

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

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

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

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

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

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

HTML

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

0

CSS

CSS sẽ như sau.

1

Tạo ngôi sao

HTML

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

2

CSS

CSS sẽ như sau.

3

Tạo ngôi sao 6 cánh

HTML

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

4

CSS

CSS sẽ như sau.

5

Tạo hình ngũ giác

HTML

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

6

CSS

CSS sẽ như sau.

7

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

HTML

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

8

CSS

CSS sẽ như sau.

9

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

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

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

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

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

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

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.