Sign Up

I found a recent discussion on Reddit’s r/webdev interesting: how might one make a container appear to have a slanted bottom border, as shown above? The top-voted answer, while clever, only worked on fixed-width containers, and used a lot of to achieve the effect; by sacrificing a small amount of backwards compatibility, I think there’s a better option.

This mini-lesson might be considered part of a push to re-imagine website layout: for the longest time we’ve been reliant on three-column grids and 90° angles. But with a little imagination, we can do so much more:

My solution doesn’t even require an extra element. Instead, it uses multiple backgrounds with a linear gradient. The full HTML is as follows: 

<div id="login">
	<h1>Sign Up</h1>
	<img src="adriana.jpg" alt>
 	<label for="name">Name</label>
 	<input id="name" type="text" name="name">
	<label for="email">Email</label>
	<input id="email" type="email" name="email">
	<label for="password">Password</label>
	<input id="password" type="password" name="password">
	<input type="submit" value="Done">
</div>

The key CSS: 

#login {
	font-family: Avenir, Calibri, sans-serif;
	width: 33%;
	margin: 0 auto;
	background-image: 
		linear-gradient(175deg, transparent 36%, white 36.05%), 
            url(nahatlatch.jpg);
	text-align: center;
	background-size: 100%, cover;
	background-repeat: no-repeat;
}

By overlaying the bitmap background image with a linear gradient (remember, in CSS the last background image in a declaration is laid down first), we get the sweep of the gradient over the image; by starting the gradient transparent, we get to see the image underneath, and by placing the transition of the transparent part of the gradient very close to the white stop, the effect is a sharp, angled cutoff.

The rest of the CSS simply styles the div (which could be almost any container element) and its content; I’ve left it here for anyone who may be interested. 

#login h1 { font-weight: 100; padding-top: 6rem; }
#login img { 
	width: 33%; 
 	height: auto; 
 	border-radius: 50%; 
 	border: 5px solid white;
}
#login label { color: #666; margin-top: 1rem; }
#login input, #login label { 
	display: block;
 	width: 90%;
	margin: 0 auto;
	padding: .5rem;
}
#login input { 
	text-align: center;
	border: none;
	border-bottom: 1px solid #aaa;
	font-size: 1rem;
}
#login input[type="submit"] { 
	width: 100%; 
	margin-top: 1rem;
	background: hsl(0, 90%, 60%);
	color: #fff; padding: 1rem;
	text-transform: uppercase;
}

There’s also the Codepen repo, which contains code for some responsive breakpoints. The single downside to this version of the effect is a bit of browser compatibility: Internet Explorer didn’t support gradients until version 10. You could, however, provide another version of the background-image declaration earlier for just that browser.

Photograph by Dru, licensed under Creative Commons

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/rObREE