DEV Community

Zubair Ahmed Khushk
Zubair Ahmed Khushk

Posted on

Complex Design of CSS

                    Cascading Style Sheets
Enter fullscreen mode Exit fullscreen mode

This is the picture of that css work. Which I have learned earlier this year. I found it interesting.

heart
If you also want to make this heart picture. Here I have given code you can try this it using notepad or any text editor. Write "div class="heart"" and close the div tag finally.

CSS Code:

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: ;
    transform: rotate(-45deg);
  }
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content: "";
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
</style> 
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
afif profile image
Temani Afif

I highly advise you to change the title of your post to make it more explicit and also format your code using markdown to make it more readable. Thanks.

Collapse
 
zubair12 profile image
Zubair Ahmed Khushk

OK bro thanks for suggestion.