Share Vẽ hình thoi với CSS3

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Tiếp tục với các hình học tôi sẽ hướng dẫn các bạn vẽ hình thoi chỉ với vài dòng lệnh CSS3. Vẽ hình thoi thực chất đó là một hình vuông được quay 45 độ chứ không có gì phức tạp. Đôi lúc các bạn cũng nên nhìn nhận ở một khía cạnh khác để đơn giản hoá vấn đề chứ không nhất thiết phải bám sát vào yêu cầu để tránh phải tự đưa mình vào khó khăn.

Nội dung mã lệnh CSS của tôi như sau:
CSS:
.diamond {
    width: 100px;
    height: 100px;
    background: #0062af;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}
Và vẽ hình thoi với dòng lệnh HTML sau:
HTML:
<div class="diamond"></div>
 
Back
Top