Share Tạo quả trứng đơn giản với CSS

filiallion · 04/30/2018

Tiếp tục với việc hướng dẫn các bạn thực hiện các thành phần nhỏ đơn giản với CSS thì lần này tôi sẽ tạo ra quả trứng chỉ với vài dòng mã lệnh CSS. Không cầu kỳ, phức tạp khi sử dụng CSS nhưng những gì mà CSS có thể làm được có thể khiến cho các bạn phải ngạc nhiên. Và lần này thì tôi lại tạo ra một hình dạng quen thuộc mà có lẻ các bạn đều biết tới, đó là hình quả trứng.

Các bạn xem qua nội dung mã lệnh CSS sau:

CSS:

.egg {
    width: 180px;
    height: 250px;
    background: #0062af;
    border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
}

Với nội dung mã lệnh CSS như trên, tôi tin rằng không có nhiều bạn có thể nghĩ tới. 3 thuộc tính đầu tiên là cơ bản nhưng với thuộc tính cuối cùng thì có lẽ các bạn cũng nên tìm hiểu thêm.

Và để tạo ra quả trứng các bạn sử dụng như sau:

HTML:

<div class="egg"></div>

Share Tạo quả trứng đơn giản với CSS

filiallion

Administrator