Share Vẽ hình trái tim với CSS3

filiallion

Administrator
Staff member
Administrator
Messages
560
Points
10
Language
Tiếng Việt
Có bao giờ các bạn thử vẽ hình trái tim bằng CSS chưa? Tôi nghĩ là chưa bởi vì trên giao diện website thì vẽ hình trái tim để làm gì. Nhưng đôi lúc cũng cần tới một chút giải trí sau thời gian làm việc căng thẳng phải không? Thực ra, bài viết này của tôi ngoài giúp các bạn có một chút thư giản thì mục đích chính của bài viết là giúp các bạn có cái nhìn chuyên xâu hơn về khả năng mà CSS có thể thực hiện đặc biệt là với CSS3 và cũng như giúp các bạn mở rộng thêm kiến thức về CSS. Với những thuộc tính CSS và CSS3 thì đủ để các bạn có thể tạo ra nhiều hình dạng mà các bạn muốn.

Bây giờ các bạn tham khảo nội dung mã lệnh CSS sau:
CSS:
.heart {
    position: relative;
}

.heart::before,
.heart::after {
    width: 70px;
    height: 115px;
    position: absolute;
    top: 0;
    left: 70px;
    content: "";
    background: #0062af;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart::after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}
Và tạo ra hình trái tim với dòng mã lệnh HTML sau:
HTML:
<div class="heart"></div>
 
Top