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 |
Halftone | 3,080 Kb |
Shift | 5,797 Kb |
Fluid Hexagonal Grid | 4,453 Kb |
Perforated Leather Background | 1,723 Kb |
Multi-line Text Fading | 3,580 Kb |
Dizzy Disks | 2,731 Kb |
Mirrored Background | 3,114 Kb |
Admit Two | 2,343 Kb |
Outer Stroke | 5,119 Kb |
Slide to Check | 3,362 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 |
Flower expansion | Sreucherand | 3,425 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Static Image to Video Block | Grayghostvisuals | 4,864 Kb |
FCC Portfolio | Cmwebby | 4,304 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
About Mazano | Kiti | 2,585 Kb |
Medium Menu | Lucasmotta | 3,923 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
See Through | Larrygeams | 77,410 Kb |
DFF Website | Hawcubite | 10,123 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!