Podemos hacer un hexágono de borde curvo usando la propiedad de pseudo-elemento de CSS.
- Use un elemento div para crear un rectángulo y también agréguele un radio de borde.
- Ahora cree un pseudo-elemento después de usar CSS y gírelo usando 60 grados.
- También cree otro pseudo-elemento antes usando CSS y gírelo -60 grados.
Ejemplo 1: este ejemplo dibuja un hexágono de borde curvo usando CSS.
<!DOCTYPE html>
<html>
<head>
<title>
Draw a Curved Edge
Hexagon using CSS
</title>
<style>
.hexagon {
top: 30vh;
left: 40%;
position: absolute;
margin: 0 auto;
background-color: dodgerblue;
border-radius: 10px;
width: 100px;
height: 63px;
box-sizing: border-box;
transition: all 1s;
border: 0.4vh solid transparent;
}
/* Creating pseudo-class */
.hexagon:before, .hexagon:after {
content: "";
border: inherit;
position: absolute;
top: -0.5vh;
left: -0.5vh;
background-color: dodgerblue;
border-radius: inherit;
height: 100%;
width: 100%;
}
/* Align them in such a way
that they form a hexagon */
.hexagon:before {
transform: rotate(60deg);
}
.hexagon:after {
transform: rotate(-60deg);
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:forestgreen;">
Geeks For Geeks
</h1>
<!-- Hexagon Division -->
<div class="hexagon"
id="hexagon">
</div>
</body>
</html>
Producción:
Ejemplo 2: Cómo dibujar un hexágono de borde curvo usando CSS con algún efecto.
<!DOCTYPE html>
<html>
<head>
<title>
Draw a Curved Edge
Hexagon using CSS
</title>
<style>
.hexagon {
top: 30vh;
left: 40%;
position: absolute;
margin: 0 auto;
/*To Add effect on the background*/
background: linear-gradient(to left,
DarkBlue, DodgerBlue);
border-radius: 10px;
width: 100px;
height: 63px;
box-sizing: border-box;
transition: all 1s;
border: 0.4vh solid transparent;
border-top-color: dodgerblue;
border-bottom-color: dodgerblue;
}
/*To create pseudo-class */
.hexagon:before, .hexagon:after {
content: "";
border: inherit;
position: absolute;
top: -0.5vh;
left: -0.5vh;
/*To Add effect on the background*/
background: linear-gradient(to left,
DarkBlue, DodgerBlue);
border-radius: inherit;
height: 100%;
width: 100%;
}
/* Align them in such a way
that they form a hexagon */
.hexagon:before {
transform: rotate(60deg);
}
.hexagon:after {
transform: rotate(-60deg);
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:forestgreen;">
Geeks For Geeks
</h1>
<!-- Hexagon Division -->
<div class="hexagon" id="hexagon"></div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA