Single div Maple Leaf

Developer
Andre Lopes
Size
2,026 Kb
Views
26,312
  1. Single div Maple Leaf Previews
  2. Single div Maple Leaf HTML Codes
  3. Single div Maple Leaf CSS Codes

How do I make an single div maple leaf?

What is a single div maple leaf? How do you make a single div maple leaf? This script and codes were developed by Andre Lopes on 29 November 2022, Tuesday.

Single div Maple Leaf Previews
IQ Test

Single div Maple Leaf - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single div Maple Leaf</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <span class="maple"></span>
</div>
</body>
</html>

Single div Maple Leaf - Script Codes CSS Codes

div { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100vw; height: 100vh;
}
.maple { width: 320px; height: 320px; background: #F00; display: block; -webkit-clip-path: polygon(47% 100%, 48% 70%, 25% 73%, 28% 65%, 7% 47%, 11% 44%, 8% 30%, 20% 32%, 23% 27%, 35% 40%, 32% 13%, 39% 16%, 50% 0, 61% 16%, 68% 13%, 65% 40%, 77% 27%, 80% 32%, 92% 30%, 89% 44%, 93% 47%, 72% 65%, 75% 73%, 52% 70%, 53% 100%); clip-path: polygon(47% 100%, 48% 70%, 25% 73%, 28% 65%, 7% 47%, 11% 44%, 8% 30%, 20% 32%, 23% 27%, 35% 40%, 32% 13%, 39% 16%, 50% 0, 61% 16%, 68% 13%, 65% 40%, 77% 27%, 80% 32%, 92% 30%, 89% 44%, 93% 47%, 72% 65%, 75% 73%, 52% 70%, 53% 100%);
}
Single div Maple Leaf - Script Codes
Single div Maple Leaf - Script Codes
Home Page Home
Developer Andre Lopes
Username alldrops
Uploaded November 29, 2022
Rating 3
Size 2,026 Kb
Views 26,312
Do you need developer help for Single div Maple Leaf?

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!

Andre Lopes (alldrops) Script Codes
Name
Pokeball
Section with cropped right image on certain breakpoints
Responsive Static Table
Live Password Validator
Nest Thermostat
Riverflow
Captain America Shield
Space Invader
PIN Creation
Clip-path scroll
Create amazing captions 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!