Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
DIAGONAL DIVIDERS V.2.
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Diagonal dividers">
<meta name="author" content="Pablo Herrero">
<title>Diagonal dividers | pabloherrero.me</title>
<head>
<body>
<header class="masthead">
<h1>Diagonal dividers v.2</h1>
</header>
<!-- Section 1 -->
<section class="section1">
<div>
<h1>Create diagonal dividers using clip-path on your sections</h1>
</div>
</section>
<footer>
<p>
&copy; 2020 Pablo Herrero
</p>
</footer>
</body>
/* Body style */
body {
font-family: sans-serif;
text-align: center;
padding: 3rem;
font-size: 1.125rem;
line-height: 1.5;
background-color: #d6d6d6; /* Set an background color */
}
h1 {
margin: auto;
text-align: center;
text-transform: uppercase;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
p {
margin: auto;
text-align: center;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.masthead {
background-color: #d6d6d6;
height: auto;
padding: 20px 0 20px 0;
}
.masthead h1 {
font-size: 60px;
text-decoration: underline;
}
.section1 {
background-color: #0e69f1;
height: 80vh;
position: relative;
/* Dividers settings */
clip-path: polygon(
0 calc(0% + 4vw) , /* left top */
100% 0, /* right top */
100% 100%, /* right bottom */
0 calc(100% - 4vw) /* left bottom */
);
}
.section1 h1 {
color: #fff;
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
footer p {
margin-top: 30px;
font-size: 12px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.