Lập trình web

Hướng dẫn vẽ trái tim bằng CSS3 - Happy Valentine’s Day

Chia sẻ nhanh

Bài viết này hướng dẫn các bạn tạo hình trái tim bằng CSS3 thuần túy. Hoàn toàn không sử dụng bất kỳ ảnh hoặc thuộc tính background-image nào.





Đầu tiên chúng ta định nghĩa css, như dưới đây

<style type="text/css">
.heart {

   position: relative;

   width: 600px;

   height: 450px;

}

.heart:before,

.heart:after {

   position: absolute;

   content: "";

   left: 250px;

   top: 0;

   width: 250px;

   height: 415px;

   background: #fc2e5a;

-webkit-border-radius: 250px 250px 0 0;

   -moz-border-radius: 250px 250px 0 0;

   border-radius: 250px 250px 0 0;

   -webkit-transform: rotate(-45deg);

      -moz-transform: rotate(-45deg);

       -ms-transform: rotate(-45deg);

        -o-transform: rotate(-45deg);

           transform: rotate(-45deg);

   -webkit-transform-origin: 0 100%;

      -moz-transform-origin: 0 100%;

       -ms-transform-origin: 0 100%;

        -o-transform-origin: 0 100%;

           transform-origin: 0 100%;

}

.heart:after {

   left: 0;

   -webkit-transform: rotate(45deg);

      -moz-transform: rotate(45deg);

       -ms-transform: rotate(45deg);

        -o-transform: rotate(45deg);

           transform: rotate(45deg);

   -webkit-transform-origin: 100% 100%;

      -moz-transform-origin: 100% 100%;

       -ms-transform-origin: 100% 100%;

        -o-transform-origin: 100% 100%;

           transform-origin :100% 100%;

}
</style>

Sau đó bạn chỉ cần đưa định dạng vào nội dung html mà bạn muốn.

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

Kết quả như sau

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?