Skip to content

Instantly share code, notes, and snippets.

@asifbacchus

asifbacchus/skewed.html

Created June 7, 2019 08:06
Show Gist options
  • Save asifbacchus/3bfbc288e03c7844ab62c4dd5b470d53 to your computer and use it in GitHub Desktop.
Save asifbacchus/3bfbc288e03c7844ab62c4dd5b470d53 to your computer and use it in GitHub Desktop.
Download ZIP
CSS only skewed page dividers with flexbox for responsiveness
Raw
skewed.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Skewed Dividers</title>
<link href="https://fonts.googleapis.com/css?family=EB+Garamond|Oswald&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<div class="wrapper">
<div class="block inverted">
<h1>skewed page dividers</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque aliquam reiciendis dolore, totam nostrum accusamus dignissimos saepe. Provident earum dolores magni consequatur. Deserunt eum tempore explicabo illo placeat consectetur id minima? Aspernatur, sint inventore illo deserunt harum voluptatem obcaecati adipisci natus nobis repudiandae minus, dolorum impedit earum nihil saepe qui.</p>
</div>
<div class="skew-cw"></div>
<div class="block regular">
<h1>second section - CW</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum porro, accusantium nobis animi molestiae esse odio officia molestias magni vel eligendi. Nulla sapiente ex atque, laboriosam deserunt dolorum distinctio dignissimos.</p>
</div>
<div class="skew-cc"></div>
<div class="block inverted">
<h1>third section - CC</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia velit fugiat vel, ratione consequatur ullam, sint minus veritatis odio id sequi amet dolorem consequuntur. Consequatur, quia quisquam? Recusandae nobis sapiente tempora incidunt obcaecati voluptates dicta et, modi sunt architecto a maiores iusto fugit voluptatem unde repellat nam, reiciendis, nostrum ullam.</p>
</div>
<div class="skew-cw"></div>
<div class="block regular">
<h1>fourth section - CW</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dignissimos molestiae minima accusamus in dolores illo laudantium sequi incidunt debitis fuga itaque, ratione perferendis libero quos molestias. Perspiciatis earum dolores voluptatum, nam fugit mollitia dicta alias vitae consectetur explicabo ullam animi odio! Iure hic consequatur libero.</p>
</div>
</div>
</body>
</html>
Raw
styles.css
/* dirty global reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--col_primary: rgba(115, 101, 152, 1);
--col_background: rgba(255, 255, 255, 1);
--headingFont: 'Oswald', sans-serif;
--bodyFont: 'EB Garamond', serif;
font-size: 62.5%;
}
body {
height: 100%;
width: 100%;
font-size: 1.6rem;
line-height: 2.5rem;
background-color: var(--col_background);
}
h1,h2,h3,h4,h5,h6 {
font-family: var(--headingFont);
}
h1 {
font-size: 3rem;
align-self: center;
margin: 2rem 0;
}
p {
font-family: var(--bodyFont);
margin: 1rem 0;
}
.wrapper {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.block {
width: 100%;
display: flex;
flex-direction: column;
padding: 10rem 10% 5rem 10%;
}
.inverted {
background-color: var(--col_primary);
color: var(--col_background);
}
.regular {
background-color: var(--col_background);
color: var(--col_primary);
}
/* skew clockwise */
.skew-cw {
width: 100%;
height: 10rem;
background: linear-gradient(to right bottom, var(--col_primary) 49%, var(--col_background) 50%), linear-gradient(-50deg, #ffffff 16px, #000000 0);
}
/* skew counter-clockwise */
.skew-cc {
width: 100%;
height: 10rem;
background: linear-gradient(to left bottom, var(--col_background) 49%, var(--col_primary) 50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment