Single DIV Love Symbol in CSS

Developer
Shidhin
Size
2,424 Kb
Views
30,360
  1. Single DIV Love Symbol in CSS Previews
  2. Single DIV Love Symbol in CSS HTML Codes
  3. Single DIV Love Symbol in CSS CSS Codes

How do I make an single div love symbol in css?

Create a LOVE symbol using a single DIV and some cool CSS features. What is a single div love symbol in css? How do you make a single div love symbol in css? This script and codes were developed by Shidhin on 18 July 2022, Monday.

Single DIV Love Symbol in CSS Previews
IQ Test

Single DIV Love Symbol in CSS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single DIV Love Symbol in CSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='love'></div>
</body>
</html>

Single DIV Love Symbol in CSS - Script Codes CSS Codes

.love { margin: 160px; position: relative; height: 50px; width: 1.5px; background-color: red; border-radius: 50%; box-shadow: -30px -20px 40px 20px red, 40px -20px 40px 20px red, 30px 10px 0 30px #e60000, -30px -20px 0px 50px #e60000, 46px -20px 0px 44px #e60000, 40px -20px 0 50px #b30000, 0px 0 0px 150px #f2aa7d, 0px 0 50px 150px red, 0px 0 200px 150px #f2aa7d;
}
.love:before { content: ''; position: absolute; left: 0; display: block; height: 20px; width: 40px; background-color: #e60000; top: -53px; left: -48px; border-radius: 30% 100%; box-shadow: 10px -9px 0px 0px #fff; -webkit-transform: rotate(10deg); opacity: 0.5; z-index: 100;
}
.love:after { content: ''; position: absolute; left: 0; display: block; margin-top: 60px; margin-left: -64px; width: 0; height: 0; padding: 0; border-top: 90px solid #e60000; border-right: 68px solid transparent; border-left: 71px solid transparent; border-bottom: 10px solid transparent;
}
Single DIV Love Symbol in CSS - Script Codes
Single DIV Love Symbol in CSS - Script Codes
Home Page Home
Developer Shidhin
Username shidhincr
Uploaded July 18, 2022
Rating 3
Size 2,424 Kb
Views 30,360
Do you need developer help for Single DIV Love Symbol in CSS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shidhin (shidhincr) Script Codes
Name
A Pen by Shidhin
FlipJS Demo
HTML Textbox with a clear button in Pure CSS and without JavaScript
Transition Spring animation - webkit
Handle Icons in Pure CSS
Simple Timer Display using RiotJS
Transition Spring animation - webkit
Click FaceBook Like to Unlock the Offer
Fire using CSS animations
Tic Tac Toe Game in Pure JavaScript and CSS
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!