HTML CSS examples for CSS Widget:Shape
Create a heart shape
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .heart {<!--from ww w . j a v a 2 s.c o m--> background-color: red; height: 60px; position: relative; top: 40px; transform: rotate(-45deg); width: 60px; transition: all 1s ease; } .heart::before, .heart::after { content: ""; background-color: red; border-radius: 50%; height: 60px; position: absolute; width: 60px; transition: all 1s ease; } .heart:before { top: -30px; left: 0; } .heart:after { left: 30px; top: 0px; } .heart { opacity: 0.3; } .heart:hover { opacity: 1; } .heart:active { opacity: 1; background: black; } .heart:active::before, .heart:active::after { background: black; } </style> </head> <body> <div class="heart"></div> </body> </html>