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. Show
Những gì bạn cần để hoàn thành hướng dẫn này
Tạo hình trònHTML Để 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ôngHTML 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ậtHTML Tương tự hình trên. CSS CSS sẽ như sau. #rectangle { width: 220px; height: 120px; background: #4da1f7; } Tạo hình OvalHTML 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ácHTML 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ốngHTML 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áiHTML 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ảiHTML 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ươngHTML 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 thangHTML 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ànhHTML Tương tự hình trên. 0 CSS CSS sẽ như sau. 1 Tạo ngôi saoHTML Tương tự hình trên. 2 CSS CSS sẽ như sau. 3 Tạo ngôi sao 6 cánhHTML Tương tự hình trên. 4 CSS CSS sẽ như sau. 5 Tạo hình ngũ giácHTML Tương tự hình trên. 6 CSS CSS sẽ như sau. 7 Tạo hình lục giácHTML Tương tự hình trên. 8 CSS CSS sẽ như sau. 9 Tạo hình bát giácHTML 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 timHTML 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ứngHTML 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ựcHTML 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ậnHTML 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 PacmanHTML Tương tự hình trên. 0 CSS CSS sẽ như sau. 1 KếtBê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. |