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

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:

div#my-div {
    awidth: 50px;
    height: 50px;
    background: orange;
}

Kết quả:

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:

div#my-div {
    awidth: 50px;
    height: 50px;
    background: red;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    --border-radius: 25px;
    border-radius: 25px;
}

Khi sử dụng thuộc tính border-radius chúng ta cần thêm vào các tiền tố tương ứng với các trình duyệt khác nhau. Ở đây chúng ta cần tạo một hình vuông và sau đó sử dụng border-radius để uốn cong thành hình tròn. Giá trị của thuộc tính này cần phải bằng 1/2 giá trị của chiều dài và chiều rộng của thẻ div tức là bằng 50px/2 = 25px.

Kết quả như sau:

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.

div#my-div {
    awidth: 150px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

Kết quả như sau:

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-left, border-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.

div#my-div {
    awidth: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

Ở trên bạn chú ý chúng ta để thẻ <div> có chiều dài và chiều rộng đều là 0.

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:

#my-div {
    awidth: 0;
    height: 0;
    border: 30px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -30px;
}

Và tiếp theo chúng ta hoàn thiện phần hình tam giác còn lại sử dụng bộ chọn :after trong CSS2:

#my-div:after {
    content: ';
    position: absolute;
    left: -30px;
    top: 30px;
    awidth: 0;
    height: 0;
    border: 30px solid transparent;
    border-top-color: red;
}

Kết quả cuối cùng chúng ta tạo được hình Ô-van như sau: