Hexagon v2

Developer
Patrick
Size
2,010 Kb
Views
10,120
  1. Hexagon v2 Previews
  2. Hexagon v2 HTML Codes
  3. Hexagon v2 CSS Codes
  4. Hexagon v2 JS Codes

How do I make an hexagon v2?

Hexagon shape using rotated elements. This was copied pretty blatantly from builtbybuffalo.com. I just wanted to see it unobstructed. (Check theirs out because it's implemented very nicely). What is a hexagon v2? How do you make a hexagon v2? This script and codes were developed by Patrick on 21 November 2022, Monday.

Hexagon v2 Previews
IQ Test

Hexagon v2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hexagon v2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <a href="#"> <div class="m">Pa</div> <div class="l"></div> <div class="r"></div>
</a> <script src="js/index.js"></script>
</body>
</html>

Hexagon v2 - Script Codes CSS Codes

* { box-siding: border-box; }
html { /*height: 100%; border: 20px solid #fff;*/ } body { margin: 100px; font-family: helvetica, sans-serif; }
a { display: inline-block; position: relative; width: 190px; height: 110px; color: #fff; text-decoration: none; background: salmon; } a .m, a .l, a .r { -webkit-transition: background .3s; transition: background: .3s; }
.m, .l, .r { width: 190px; height: 110px; position: absolute; background: tan; } .m { line-height: 110px; text-align: center; font-size: 100px; font-weight: bold; letter-spacing: -.05em; color: rgba(255,255,255,.3); } .l { z-index: -1; -webkit-transform: rotate(60deg); transform: rotate(60deg); } .r { z-index: -1; -webkit-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); }
a:hover .m,
a:hover .l,
a:hover .r { background: lightBlue; }

Hexagon v2 - Script Codes JS Codes

// changing width/height of interior div's results in other shapes
Hexagon v2 - Script Codes
Hexagon v2 - Script Codes
Home Page Home
Developer Patrick
Username hinducows
Uploaded November 21, 2022
Rating 3
Size 2,010 Kb
Views 10,120
Do you need developer help for Hexagon v2?

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!

Patrick (hinducows) Script Codes
Name
Arrow Navigation
CSS Filters
Flat UI Element
3D Transforms
Overlay Drop Description
Item Display
Simple Button
3D Transforms Flip
Menu Overlay
Fixed Scrolling Backgrounds
Create amazing art & images 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!