Menu
Can such a hexagon be created with pure CSS3?
Thanks for any help!
278
We can make a curved edge hexagon by using the pseudo-element property of CSS. Use a div element to create a rectangle and also add border-radius to it. Now create a pseudo-element after using CSS and rotate it by using 60deg. Also create another pseudo-element before by using CSS and rotate it by -60deg.
Using rotate() method of CSS3 transform to create a hexagonal shaped structure with an image inside it. Adjust the box-shadow to hide out the excess of the hexagon structure with the background color ie., in the example white.
In this article, we will design some different types of shapes using CSS. CSS is capable of making all types of shapes.
The polygon() function is an inbuilt function in CSS which is used with the filter property to create a polygon of images or text. Syntax: polygon( percentage | length); Parameter: This function accepts two parameter percentage or length which is used to hold the value of polygon size.
A simple search turned this up: CSS Hexagon Tutorial
Referenced from the site:
Put a 104px × 60px div with a background colour between them and you get (the hexagon):
width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
width: 104px;
height: 60px;
background-color: #6C6;
width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
