I'm not an expert with html so this is why I'm asking this question, so I could create an hexagon, but I need to create another one inside of the hexagon created, so this is why I'm asking if any of you guys could help me, thanks in advance!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class='octagonWrap'>
<div class='octagon'></div>
<div class="octagontwo"></div>
</div>
</body>
</html>
here's the css
.octagonWrap {
width:400px;
height:400px;
float: left;
position: absolute;
overflow: hidden;
top: 30%;
left: 20%;
}
.octagon {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
overflow: hidden;
transform: rotate(45deg);
background: rgb(255, 255, 255);
border: 3px solid rgb(0, 0, 0);
}
.octagon:before {
position: absolute;
/* There needs to be a negative value here to cancel
* out the width of the border. It's currently -3px,
* but if the border were 5px, then it'd be -5px.
*/
top: -3px; right: -3px; bottom: -3px; left: -3px;
transform: rotate(45deg);
content: '';
border: inherit;
}
Aucun commentaire:
Enregistrer un commentaire