DEV Community

loading...

Complex Design of CSS

zubair12 profile image Zubair Ahmed Khushk ・1 min read
                    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

Discussion (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 Author

OK bro thanks for suggestion.

Forem Open with the Forem app