Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
set the size of the boxes and any decoration
.slider {
/* set initial width */
width: 520px;
/* hide the content that overflows (to allow second box to show through) */
overflow: hidden;
display: inline-block;
/* skew container so that it has angled edge, and set up transition */
transform: skewX(-20deg);
transition: width 1.2s ease-in-out;
/* give negative margin to remove gap caused by left hand skew */
margin-left: -76px;
border-right: 10px solid ghostwhite;
/* hide pointer events for unseen content */
pointer-events: none;
/* set the size of the boxes and any decoration */
.box {
width: 880px;
height: 330px;
border-radius: .5em;
/* make the links the size of the full boxes (not needed for technique) */
.box a {
display: block;
width: 100%;
height: 100%;
.sunset {
/* skew back by negative of parent’s skew so contents is upright */
transform: skewX(20deg);
background: url( no-repeat;
margin-left: 76px; /* give margin to push content away from left slanted edge */
pointer-events: auto; /* allow pointer events for the box */
.sunrise {
background: url( no-repeat;
position: absolute; /* remove from flow so sunset is placed on top */
box-shadow: 0 0 10px rgba(0, 0, 0, .7);
/* make first box bigger on hover, and smaller when hover second box */
.slider:hover {
width: 760px;
.sunrise:hover + .slider {
width: 250px;
/* decoration for body, header and footer */
body {
/* style body. can ignore */
font-family: helvetica, sans-serif;
margin: 3em;
background: url(, radial-gradient(50% -80%, #d1d1d1, #d9d9d9);
h1 {
color: #2F2F2F;
font-size: 26px;
text-shadow: 0 0 2px white;
margin-bottom: 1.5em;
footer {
position: absolute;
bottom: 1px;
color: dimgrey;
text-shadow: 0 0 1px white;
font-size: 12px;
footer a {
color: darkorange;
text-decoration: none;
<h1>Split view feature box with CSS skew transform and transitions</h1>
<div class="box sunrise"><a href="#box2"></a></div>
<div class="slider">
<div class="box sunset"><a href="#box1"></a></div>
<p>Handcrafted by <a href="">@dstorey</a> for
<a href=""></a>. Sunset image, <a href="">Some rights reserved</a> by <a href="">najeebkhan2009</a>. Sunrise image, <a href="">Some rights reserved</a> by <a href="">3dpete</a>.</p>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment