Sử dụng CSS để vẽ các hình

Sử dụng CSS để vẽ các hình
Tròn vuông tam giác vuông tròn

CSS cung cấp nhiều tính năng cho phép các lập trình viên có thể vẽ được nhiều hình khác nhau. Bài viết này sẽ hướng dẫn bạn cách tạo các hình thông qua các ví dụ cụ thể:

Hình Vuông và Hình Chữ Nhật

Việc tạo ra 2 loại hình này không quá khó, tuy nhiên tôi vẫn muốn liệt kê ra đây để các bạn tham khảo:

Ta có <div id="my-div"></div> 

Sau đó ta viết CSS như sau :

Hình Tròn

Thông thường khi phải tạo ra hình tròn trên trang bạn sẽ nghĩ tới việc phải sử dụng hình ảnh thay vì có thể dùng CSS. Điều này chỉ đúng với CSS2 với CSS3 chúng ta có thể sử dụng thuộc tính border-radius để có thể tạo hình tròn mà hoàn toàn không cần phải dùng tới hình ảnh. Hãy xem ví dụ sau:

Ta có 

<div id="my-div"></div>

Ta viết CSS như sau  : 

Kết quả  :

Hình Ô-van

Hình ô-van cũng được tạo ra tương tự như hình tròn tuy nhiên thẻ div ở ngoài sẽ là hình chữ nhật thay vì là hình vuông.

Tương tự ta viết CSS để có hình Ô-van

Hình Tam Giác

Hình tam giác được tạo ra khi chúng ta sử dụng kết hợp 3 thuộc tính border-leftborder-right và border-bottom để tạo đường bao viền trái, phải và đáy qua đó tạo nên hình tam giác.

 

Hình Kim Cương

Để tạo hình kim cương trước tiên chúng ta tạo một hình tam giác sử dụng đoạn code sau:

 

Kết thúc bài tròn vuông tam giác, vuông vuông tròn. :)

Chúc bạn học tốt.