Flexible Rounded Hexagons
How do I make an flexible rounded hexagons?
Fluid, responsive hexagons with rounded corners (using border-radius) in SCSS.For more techniques for creating fluid hexagons, checkout Flexagons. What is a flexible rounded hexagons? How do you make a flexible rounded hexagons? This script and codes were developed by Joey Hoer on 14 September 2022, Wednesday.
Flexible Rounded Hexagons - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexible Rounded Hexagons</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="hex"> <div class="hook"></div> <div class="center">Rounded</div>
</div>
<div class="hex horizontal"> <div class="hook"></div> <div class="center">Hexagons</div>
</div>
</body>
</html>
Flexible Rounded Hexagons - Script Codes CSS Codes
.hex, .hex.horizontal { position: relative; visibility: hidden;
}
.hex::after, .hex.horizontal::after { content: ''; display: block;
}
.hex > *, .hex.horizontal > * { visibility: visible;
}
.hex .hook, .hex.horizontal .hook { position: absolute; background-color: inherit;
}
.hex .hook::before, .hex.horizontal .hook::before, .hex .hook::after, .hex.horizontal .hook::after { content: ''; background-color: inherit; position: absolute; height: 100%; width: 100%; top: 0; left: 0;
}
.hex .hook::before, .hex.horizontal .hook::before { -webkit-transform: rotate(60deg); transform: rotate(60deg);
}
.hex .hook::after, .hex.horizontal .hook::after { -webkit-transform: rotate(-60deg); transform: rotate(-60deg);
}
.hex { background: #6abf40; display: inline-block; vertical-align: middle; width: 15%; color: #fff; text-transform: uppercase; font-weight: bold; font-size: 2vw; -webkit-filter: drop-shadow(1vw 1vw 3px rgba(0, 0, 0, 0.3));
}
.hex::after { padding-top: 115.47344%;
}
.hex .hook { width: 100%; height: 50%; top: 25%; left: auto;
}
.hex .hook, .hex .hook::before, .hex .hook::after { border-radius: 5% / 20%;
}
.hex > .hook { opacity: 0.85;
}
.hex.horizontal { width: 17.25%;
}
.hex.horizontal::after { padding-top: 86.60254%;
}
.hex.horizontal .hook { width: 50%; height: 100%; top: auto; left: 25%;
}
.hex.horizontal .hook, .hex.horizontal .hook::before, .hex.horizontal .hook::after { border-radius: 20% / 5%;
}
.center { text-align: center; position: absolute; top: 50%; right: 0; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%);
}
/* Center */
html, body { height: 100%;
}
html { display: table; width: 100%;
}
body { display: table-cell; vertical-align: middle; text-align: center;
}
Developer | Joey Hoer |
Username | joeyhoer |
Uploaded | September 14, 2022 |
Rating | 3 |
Size | 3,463 Kb |
Views | 28,336 |
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!
Name | Size |
Shift | 5,797 Kb |
Outer Stroke | 5,119 Kb |
Fighting the Space | 2,677 Kb |
SMPTE Color Bars | 89,133 Kb |
Responsive Text with Viewport Units | 65,818 Kb |
Pinked Border | 4,630 Kb |
Fluid Hexagonal Grid | 4,453 Kb |
CSS Preloader Animations | 10,383 Kb |
Mirrored Background | 3,114 Kb |
Dizzy Disks | 2,731 Kb |
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!
Name | Username | Size |
A Pen by aleen42 | Aleen42 | 11,473 Kb |
A Pen by Miro Olma | Programiro | 2,342 Kb |
SVG Icons Template | Legofsalmon | 2,618 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
Contact | GanNichiHa | 2,514 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Scoreboard.js basic usage | Tbleckert | 1,733 Kb |
Material design buttons | Fischaela | 4,381 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!