<html>

<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" href="./styles.css" />
</head>

<body>
	<h1><a href="https://blog.sandbay.it/news/styles/making-hexagons/" target="_blank">One-color CSS Hexagon</a></h1>
	<div class="hex-container">
		<div class="hex generic">1 color<br />hexagon</div>
		<div class="hex generic-2">1 color<br />hex (2)</div>
		</div>

		<h1><a href="https://blog.sandbay.it/news/styles/making-hexagons/" target="_blank">Image CSS Hexagon</a></h1>
		<div class="hex-container">
			<div class="hex image"></div>
		</div>

		<h1><a href="https://blog.sandbay.it/news/styles/making-hexagons/" target="_blank">SVG Hexagon</a></h1>
		<div class="hex-container">
			<div class="hex-container hex">
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="265"
					height="203" viewBox="0 0 465 403">
					<defs>
						<path id="a" d="M913.25 149h232.5L1262 350.5 1145.75 552h-232.5L797 350.5z" />
					</defs>
					<g fill="none" fill-rule="evenodd" transform="translate(-797 -149)">
						<use fill="#1D4371" xlink:href="#a" />
						<use fill="#000" filter="url(#b)" xlink:href="#a" />
					</g>
				</svg>
			</div>
</body>

</html>
h1 {
  background: #236965 url("https://tools.obyte.it/img/idrobyte/logo_sfera.svg")
    no-repeat;
  background-position: 2px 2px;
  margin: 0 0 10px;
  padding: 0 0 0 60px;
  background-size: 45px;
  line-height: 52px;
}
h1 a {
  color: white;
  font-family: Verdana;
  font-size: 20px;
  text-decoration: none;
}
.hex {
  margin: 20px auto 50px;
}
.hex-container {
  padding: 15px 20px;
  background-color: white;
}

/** */

.hex.generic {
  position: relative;
  width: 82px;
  height: 47.34px;
  line-height: 23px;
  background-color: rgb(47, 170, 177);
  margin: 40px auto 70px;
  color: white;
  text-align: center;
}
.hex.generic:before,
.hex.generic:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  border-left: 41px solid transparent;
  border-right: 41px solid transparent;
}
.hex.generic:before {
  bottom: 100%;
  border-bottom: 23.67px solid rgb(47, 170, 177);
}
.hex.generic:after {
  top: 100%;
  width: 0;
  border-top: 23.67px solid rgb(47, 170, 177);
}

/** */

/** */
.hex.generic-2 {
  position: relative;
  width: 47.34px;
  height: 82px;
  line-height: 38px;
  background-color: rgb(47, 170, 177);
  margin: 40px auto 70px;
  color: white;
  text-align: center;
  overflow: visible;
}
.hex.generic-2:before,
.hex.generic-2:after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  border-top: 41px solid transparent;
  border-bottom: 41px solid transparent;
}
.hex.generic-2:before {
  right: 100%;
  border-right: 23.67px solid rgb(47, 170, 177);
}
.hex.generic-2:after {
  left: 100%;
  width: 0;
  border-left: 23.67px solid rgb(47, 170, 177);
}

/** */

.hex.image {
  width: 240px;
  height: 200px;
  background: transparent
    url("https://tools.obyte.it/public/models/images/spaceship_2.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
}
.hex.image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0px;
  border-right: 70px solid transparent;
  border-bottom: 100px solid white;
  border-top: 100px solid white;
}
.hex.image:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 65px solid transparent;
  border-bottom: 100px solid white;
  border-top: 100px solid white;
}

/** */

.hex svg {
  margin: 20px auto;
  display: block;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.