Create Octagon Shape – Stunning CSS

thumbnail

In this tutorial, you will read about creating octagon shape using CSS.

Example 1

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.octagon {
	margin-top: 50px;
	display: block;
	background-color: #79c356;
	width: 160px;
	height: 60px;
	position: relative;
}

.octagon:before {
	content: '';
	display: block;
	width: 60px;
	height: 0px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 50px solid #a4fd7b;
	border-top: none;
	position: absolute;
	top: -50px;
}

.octagon:after {
	content: '';
	display: block;
	width: 60px;
	height: 0px;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 50px solid #69ce3a;
	border-bottom: none;
	position: absolute;
	bottom: -50px;
}
</style>
</head>
<body>
<h3>Create Octagon Shape - Stunning CSS</h3>
<br>
<div class="octagon">
</div>

</body>
</html>

The output will be shown like below:

Example 2

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.octagon2{
    width: 158px;
    height: 100px;
    background: red;
    position: relative;
}
.octagon2:before {
    content: "";
    width: 100px;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid red;
    border-left: 29px solid white;
    border-right: 29px solid white;
}
.octagon2:after {
    content: "";
    width: 100px;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid red;
    border-left: 29px solid white;
    border-right: 29px solid white;
}  
</style>
</head>
<body>
<h3>Create Octagon Shape - Stunning CSS</h3>
<br>
<div class="octagon2">
</div>

</body>
</html>

The output will be show like below:

Back To Top