Hướng dẫn tạo hình trái tim bằng Html và CSS

Ủng hộ AnonyHome Team
Chờ một chút: bạn thấy bài viết có ích chứ? Hãy chia sẻ nó với mọi người nhé!

Chúng ta sẽ cùng nhau tạo ra một hình trái tim bằng cách sử dụng HTML và CSS. Nếu chúng ta kiểm tra một hình trái tim, chúng ta có thể thấy rằng nó được tạo thành từ hai vòng tròn và một hình chữ nhật kết hợp . Các phần tử HTML về bản chất là hình vuông hoặc hình chữ nhật. Nhờ bán kính đường viền CSS3, chúng ta có thể biến hình chữ nhật thành hình tròn dễ dàng.
Bắt đầu bằng cách thêm một thẻ <div>, yếu tố làm nền tảng cho hình trái tim của chúng ta.

<div class="heart-shape"></div>

Sau đó, chúng ta làm cho nó một hình vuông bằng cách xác định chiều rộng và chiều cao bằng nhau. Chọn màu nền bạn thích.

.heart-shape{
position: relative;
width: 200px;
height: 200px;
background-color: rgba(250,184,66, 0.8);
}

Tiếp theo, chúng ta sẽ tạo vòng tròn.
Thay vì thêm các phần tử mới, chúng ta sẽ sử dụng  :before và :after. Đầu tiên chúng ta đặt các :before làm vòng tròn đầu tiên của chúng ta. Tôi làm cho nó một hình vuông với kích thước bằng nhau về chiều rộng và chiều dài giống như chúng tôi đã làm với div. Sau đó chúng ta biến nó thành một vòng tròn bằng cách cho nó bán kính biên giới là 50% và đặt nó ở phía bên trái của hình vuông.

.heart-shape:before{
position: absolute;
bottom: 0px;
left: -100px;
width: 200px;
height: 200px;
content: '';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(250,184,66, 0.8);
}

Cùng với hình vuông, chúng ta sẽ có kết quả như sau:

Hướng dẫn tạo hình trái tim bằng Html và CSS

Sau đó, chúng ta tạo vòng tròn thứ hai với phần tử :after  giống như vòng tròn đầu tiên mà chúng ta tạo ra. Sau đó, tôi cũng đặt nó trên đỉnh của hình vuông.

.heart-shape:after{
position: absolute;
top: -100px;
right: 0px;
width: 200px;
height: 200px;
content: ' ';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(250,184,66, 0.8);
}

Kết quả như sau:

Hướng dẫn tạo hình trái tim bằng Html và CSS

Chúng ta có thể kết hợp hai kiểu giống nhau này bằng cách như sau:

.heart-shape:before,
.heart-shape:after{
position: absolute;
width: 200px;
height: 200px;
content: ' ';
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
background-color: rgba(250,184,66, 0.8);
}
.heart-shape:before{
bottom: 0px;
left: -100px;
}
.heart-shape:after{
top: -100px;
right: 0px;
}

Như vậy chúng ta có hình trái tim, mặc dù nó chưa đúng hướng. Để làm thẳng nó, chúng ta sẽ sử dụng CSS3 Transformation.

.heart-shape{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}

Và đây là  trái tim của chúng ta bây giờ sẽ thành như sau:

Hướng dẫn tạo hình trái tim bằng Html và CSS

Bây giờ chúng ta đã có một hình trái tim hoàn hảo, chúng ta có thể thay thế nền cho một màu khác (ví dụ như màu hồng hoặc đỏ) một cách dễ dàng. Bạn có thể gửi nó cho crush của mình. Tôi chắc rằng cô ấy sẽ rất thích ý tưởng của bạn. Chúc bạn thành công.

Share
0 0 vote
Vui lòng đánh giá bài viết
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
XEM THÊM
AnonyHome chia sẻ đến các bạn…
0
Bạn thích bài viết chứ? Hãy để lại bình luận.x
()
x