Vẽ hình bằng CSS

26/04/2019

Bài sau »

CSS có thể vẽ được nhiều hình dạng khác nhau. Từ đơn giản như hình vuông, tròn đến phức tạp như các hình đa giác, trái tim, ngôi sao,... Trong bài viết này chúng ta cùng xem CSS có thể vẽ được những hình gì nhé.

Hình vuông


#hinhvuong { width: 100px; height: 100px; background: red; }

Hình chữ nhật


#hinhchunhat { width: 200px; height: 100px; background: red; }

Hình tròn


#hinhtron { width: 100px; height: 100px; background: red; border-radius: 50%; }

Hình trái xoan


#hinhtraixoan { width: 200px; height: 100px; background: red; border-radius: 100px/50px; }

Hình tam giác - trên


#hinhtamgiac-tren { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }

Hình tam giác - dưới


#hinhtamgiac-duoi { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; }

Hình tam giác - trái


#hinhtamgiac-trai { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 100px solid red; }

Hình tam giác - phải


#hinhtamgiac-phai { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 100px solid red; }

Hình tam giác - trên bên trái


#hinhtamgiac-trentrai { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; }

Hình tam giác - trên bên phải


#hinhtamgiac-trenphai { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }

Hình tam giác - dưới bên phải


#hinhtamgiac-duoiphai { width: 0; height: 0; border-right: 100px solid red; border-top: 100px solid transparent; }

Hình tam giác - dưới bên trái


#hinhtamgiac-duoitrai { width: 0; height: 0; border-left: 100px solid red; border-top: 100px solid transparent; }

Hình mũi tên


#hinhmuiten { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; transform: rotate(10deg); } #hinhmuiten:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0; top: -12px; left: -9px; width: 12px; height: 12px; transform: rotate(45deg); }

Hình thang


#hinhthang{ border-bottom: 50px solid red; border-left: 25px solid transparent; border-right: 25px solid transparent; height: 0; width: 100px; }

Hình bình hành


#hinhbinhhanh{ width: 150px; height: 100px; transform: skew(20deg); background: red; }

Hình ngôi sao


#hinhngoisao{ margin: 50px 0; position: relative; display: block; color: red; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; transform: rotate(35deg); } #hinhngoisao:before { border-bottom: 80px solid red; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; transform: rotate(-35deg); } #hinhngoisao:after { position: absolute; display: block; color: red; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid red; border-left: 100px solid transparent; transform: rotate(-70deg); content: ''; }
Bài sau »
Back to top