Skip to content

Instantly share code, notes, and snippets.

@bazooka07

bazooka07/hexagon-css.html

Last active June 8, 2018 09:44
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bazooka07/57d04a45d69f932444fd7ec5dc47f8e7 to your computer and use it in GitHub Desktop.
Save bazooka07/57d04a45d69f932444fd7ec5dc47f8e7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
hexagon-css.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hexagone-1</title>
<style>
* { margin:0; padding:0; box-sizing: border-box; }
body {
font-size: 12pt;
font-family: 'Noto Sans';
background: #eee;
--hexa-h: 50vh;
--hexa-w: 28.8675vh; /* --hexa-h * tan(30deg) */
--border-w: 0.5vh;
}
/* auto-centrage vertical */
.centrage-v { margin-top: 50vh; transform: translateY(-50%); }
#container {
position: relative;
width: var(--hexa-w);
margin: 0 auto;
}
/* ----- borders ----- */
.hexa {
border: var(--border-w) solid green;
border-left: none;
border-right: none;
height: var(--hexa-h);
width: var(--hexa-w);
}
.hexa { background-color: #00f6; margin: 0; padding: 0; }
.hexa:nth-of-type(1) { background-color: #ff06; position: absolute; top: 0; left: 0; transform: rotate(60deg); }
.hexa:nth-of-type(2) { background-color: #f806; position: absolute; top: 0; left: 0; transform: rotate(-60deg); }
.content {
position: absolute;
width: 200%;
left: -50%; /* (200% -100%) / 2 */
/* ---- centrage vertical ----- */
top: 50%;
transform: translateY(-50%);
text-align: center;
overflow: hidden;
border: 1px solid red;
}
.content span {
display: inline-block;
/* text-align: justify; */
/* white-space: nowrap; */
border: 1px solid #555;
margin: 0.6% 0;
}
.content span:nth-of-type(1), .content span:nth-of-type(10) { width: 55%; }
.content span:nth-of-type(2), .content span:nth-of-type( 9) { width: 70%; }
.content span:nth-of-type(3), .content span:nth-of-type( 8) { width: 80%; }
.content span:nth-of-type(4), .content span:nth-of-type( 7) { width: 90%; }
.content span:nth-of-type(5), .content span:nth-of-type( 6) { width: 100%; }
#guideline + div + div { text-align: center; margin-top: 1rem;}
#guideline + div + div label { padding: 0.3rem 1rem; cursor: pointer; background: #999; color: #fff; }
#guideline + div + div label:hover { background: green; }
#guideline { display: none; }
#guideline:checked + div .hexa { background-color: #fff; }
#guideline:checked + div .content,
#guideline:checked + div span { border: none}
</style>
</head><body>
<div class="centrage-v">
<input type="checkbox" id="guideline" />
<div id="container">
<div class="hexa"></div>
<div class="hexa"></div>
<div class="hexa">
<div class="content">
<span>Sed cautela nimia in peiores haeserat</span>
<span> plagas, ut narrabimus postea, aemulis </span>
<span>consarcinantibus insidias graves apud Constan-</span>
<span>tium, cetera medium principem sed siquid auribus</span>
<span>eius huius modi quivis infudisset ignotus, acerbum</span>
<span> cautela nimia in peiores et inplacabilem et in hoc causarum</span>
<span> titulo dissimilem suSed haeserat plagas, ut narrabimus postea, aemulis consarcinantibus</span>
<span>insidias graves apud Constantium, cetera medium principem </span>
<span>sed siquid auribus eius huius modi quivis infudisset ignotus,</span>
<span>acerbum et inplacabilem et in hoc causarum titulo dissimilem su</span>
</div>
</div>
</div>
<div><label for="guideline">Clique-moi dessus</label></div>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment