Heptagon

https://danielpietrasik.pl/css-wielokaty/

by Daniel Pietrasik

HTML

<!-- 
 - CSS wielokąty - rysowanie figur i kształtów, generatory
 - https://danielpietrasik.pl/css-wielokaty/ 
-->

<div id="heptagon"></div>

CSS

/**
 * CSS wielokąty - rysowanie figur i kształtów, generatory
 * https://danielpietrasik.pl/css-wielokaty/ 
 **/

#heptagon {
	font-size: 6px; /* Sterowanie rozmiarem figury. */
	width: 20em;
	height: 7em;
	background-color: #F34A53;
	position: relative;
	margin: 70px auto 0;
}

#heptagon:before {
	content: '';
	position: absolute;
	bottom: 6.95em; /* Błąd przeliczania niektórych przeglądarek podczas skalowania figury. */
	left: 0;
	border-bottom: 6em solid #F34A53;
	border-left: 10em solid transparent;
	border-right: 10em solid transparent;
}

#heptagon:after {
	content: '';
	position: absolute;
	top: 6.95em; /* Błąd przeliczania niektórych przeglądarek podczas skalowania figury. */
	left: 0;
	width: 8em;
	border-top: 6em solid #F34A53;
	border-left: 6em solid transparent;
	border-right: 6em solid transparent;
}