CSS Hình tam giác và tất cả các hình khối khác

Anh em đang đau đầu về CSS các hình khối như tam giác, hình vuông, hình tròn, hinh elip, hình ngôi sao… tất cả đều có ở đây.

Source: https://css-tricks.com/examples/ShapesOfCSS/

Một vài hình cơ bản được mình tổng hợp anh em chú ý kích thước “width”, “height” nhé, còn lại thì phải giữ để nó còn ra hình.

Hình vuông

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

Hình chữ nhật

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

Hình tròn

#circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px;}

Hình oval

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

Hình tam giác (đỉnh ở trên)

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

Hình tam giác (đỉnh ở dưới)

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

Hình tam giác (đỉnh ở bên trái)

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

Hình tam giác (đỉnh ở bên phải)

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

Hình tam giác vuông (góc vuông ở góc trên trái)

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

Hình tam giác vuông (góc vuông ở góc trên phải)

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

Hình tam giác vuông (góc vuông ở góc dưới trái)

#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}

Hình tam giác vuông (góc vuông ở góc dưới phải)

#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent;}

Còn rất nhiều nữa nhé, em em cứ vào trang kia mà xem nhé, đây chỉ là cơ bản thôi.

CSS, WORDPRESS