Share Tạo hình ảnh với các dạng hình học cơ bản

[filiallion]

Language

Tiếng Việt

Bài viết này tôi sẽ hướng dẫn các bạn vẽ các hình học cơ bản như hình vuông, hình tròn và hình tam giác chỉ bằng CSS đơn thuần. Về hình vuông thì có lẽ chỉ là việc rất đơn giản nhưng tôi cũng muốn hướng dẫn để các bạn có thể thấy những khác biệt về mã lệnh CSS giữa các hình học này. Và trong 3 hình mà tôi sẽ hướng dẫn, có lẽ các bạn nghĩ rằng hình tam giác là phức tạp nhưng thực sự thì không phải như vậy, những gì mà CSS cung cấp sẽ làm các bạn ngạc nhiên đặc biệt là với phiên bản CSS 3 hiện tại.

Đầu tiên, nội dung mã lệnh CSS để vẽ hình vuông:

.square {
    width: 500px;
    height: 500px;
    background: #0062af;
}

Nội dung mã lệnh CSS để vẽ hình tròn:

.circle {
    width: 500px;
    height: 500px;
    background: #0062af;
    border-radius: 50%;
}

Nội dung mã lệnh CSS để vẽ hình tam giác:

.triangle {
    width: 500px;
    height: 500px;
    background: #0062af;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

Và để sử dụng các lớp CSS này, các bạn chỉ việc gọi các lớp trong một thẻ <div> chẳng hạn, ví dụ như sau:

<div class="square"></div>