Skip to content

Instantly share code, notes, and snippets.

@amomin

amomin/README.markdown

Last active November 25, 2015 02:11
Show Gist options
  • Save amomin/bf0611a611dcdbc878f3 to your computer and use it in GitHub Desktop.
Save amomin/bf0611a611dcdbc878f3 to your computer and use it in GitHub Desktop.
Download ZIP
Slanted Rows
Raw
README.markdown

Example of slanted row layout.

Two examples are given - the first only works if the width is fixed, the second is responsive.

Raw
index.html
<html>
<head>
<style>
/**
Assumptions -width = 900px
**/
.row {
height:200px;
position:relative;
width:900px;
margin:auto;
}
.row p {
width:600px;
}
.row img {
width:300px;
display:block;
float:left;
height:200px;
z-index:-1000;
}
.row::after {
display:block;
content: "";
clear:both;
float:none;
}
.left img, .left p {
float:left;
}
.right img, .right p {
float:right;
}
.row.dark {
background: rgba( 0,123,182,1);
}
.row.med {
background: rgba( 0,179,220,1);
}
.row.light {
background: #87d3e1;
}
.top, .bottom {
position:absolute;
width:0;
height:0;
}
.top {
top:-20px;
z-index:1000;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-top:10px solid transparent;
}
.bottom {
bottom:-20px;
z-index:20;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom:10px solid transparent;
}
.left .top{
left:300px;
border-left:300px solid transparent;
}
.left .bottom {
left:600px;
border-left:150px solid transparent;
}
.right .top{
right:300px;
border-right:300px solid transparent;
}
.right .bottom {
right:600px;
border-right:150px solid transparent;
}
.dark .top {
border-bottom:10px solid rgba( 0,123,182,1);
}
.dark .bottom {
border-top:10px solid rgba( 0,123,182,1);
}
.med .top {
border-bottom:10px solid rgba( 0,179,220,1);
}
.med .bottom {
border-top:10px solid rgba( 0,179,220,1);
}
.light .top {
border-bottom:10px solid #87d3e1;
}
.light .bottom {
border-top:10px solid #87d3e1;
}
.left.dark .top {
border-right: 300px solid rgba( 0,123,182,1);
}
.left.dark .bottom {
border-right: 150px solid rgba( 0,123,182,1);
}
.right.dark .top {
border-left: 300px solid rgba( 0,123,182,1);
}
.right.dark .bottom {
border-left: 150px solid rgba( 0,123,182,1);
}
.left.med .top {
border-right: 300px solid rgba( 0,179,220,1);
}
.left.med .bottom {
border-right: 150px solid rgba( 0,179,220,1);
}
.right.med .top {
border-left: 300px solid rgba( 0,179,220,1);
}
.med.right .bottom {
border-left: 150px solid rgba( 0,179,220,1);
}
.left.light .top {
border-right: 300px solid #87d3e1;
}
.light.left .bottom {
border-right: 150px solid #87d3e1;
}
.right.light .top {
border-left: 300px solid #87d3e1;
}
.right.light .bottom {
border-left: 150px solid #87d3e1);
}
</style>
</head>
<body>
<p>
Some stuff, like a header. <br>
<a href="responsive.html"> Responsive version </a>
</p>
<div class="row left dark">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
<div class="row right med">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
<div class="row left light">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
<div class="row right dark">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
<div class="row left med">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
<div class="row right light">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
</body>
</html>
Raw
responsive.html
<html>
<head>
<style>
.row { position:relative;
width:90%;
margin:auto;
}
.left img, .left p {
float:left;
}
.right img, .right p {
float:right;
}
.row p {
width:60%;
}
.row img {
display:block;
width:30%;
z-index:-1000;
}
.row::after {
display:block;
content: "";
clear:both;
float:none;
}
.row.dark {
background: rgba( 0,123,182,1);
}
.row.med {
background: rgba( 0,179,220,1);
}
.row.light {
background: #87d3e1;
}
.top, .bottom {
position:absolute;
width:0;
height:0;
z-index:1000;
}
.top:after, .bottom:after {
content: "";
display: block;
width: 0;
height: 0;
}
/** THE FOLLOWING IS COMPLETELY BASED OFF OF THIS JS FIDDLE
* https://jsfiddle.net/josedvq/3HG6d/
*/
/*Up-right pointing = Bottom of left floating rows
* For a slope of 1/10, you need to set the ratio of
* padding-left:padding-top = 10
* margin-left : margin-top = 10
* border-left : border-top = 10
* For other slopes set the ratio accordingly
*/
.left .bottom {
padding-left:30%;
padding-top: 3%;
overflow: hidden;
left:70%;
top:100%;
}
.left .bottom:after {
margin-left:-5000px;
margin-top:-500px;
border-left: 5000px solid transparent;
border-top: 500px solid black;
}
/*Down-right pointing = Top of left floating rows
* border-top:margin-top = 1
* width:padding-top = 10
* border-right:border-top = 10
*/
.left .top {
left:30%;
top:-44%;
width: 70%;
padding-top: 10%;
overflow: hidden;
}
.left .top:after {
margin-top:-500px;
border-top: 500px solid transparent;
border-right: 5000px solid black;
}
/*Down-left pointing = top of right aligned rows
* width:padding-bottom = 10
* border-right:border-bottom = 10
* Adjust the top accordingly (not sure what the rule should be)
*/
.right .top {
top:-31%;
width: 70%;
padding-bottom: 7%;
overflow: hidden;
}
.right .top:after {
border-right: 5000px solid transparent;
border-bottom: 500px solid black;
}
/*Up-left pointing = Bottom of left aligned rows
* For a slope of 1/10 use the following ratios:
* padding-left:padding-bottom : 10
* margin-left:border-left : 1
* margin-left:border-bottom : 10
* Adjust bottom accordingly (not sure what the rule should be)
*/
.right .bottom {
bottom:-13%;
padding-bottom: 3%;
padding-left: 30%;
overflow: hidden;
}
.right .bottom:after {
margin-left: -5000px;
border-bottom: 500px solid transparent;
border-left: 5000px solid black;
}
/** Fix the triangle colors **/
.dark.right .bottom:after {
border-left: 5000px solid rgba( 0,123,182,1);
}
.med.right .bottom:after {
border-left: 5000px solid rgba( 0,179,220,1);
}
.light.right .bottom:after {
border-left: 5000px solid #87d3e1;
}
.dark.right .top:after {
border-bottom: 500px solid rgba( 0,123,182,1);
}
.med.right .top:after {
border-bottom: 500px solid rgba( 0,179,220,1);
}
.light.right .top:after {
border-bottom: 500px solid #87d3e1;
}
.dark.left .bottom:after {
border-top: 500px solid rgba( 0,123,182,1);
}
.med.left .bottom:after {
border-top: 500px solid rgba( 0,179,220,1);
}
.light.left .bottom:after {
border-top: 500px solid #87d3e1;
}
.dark.left .top:after {
border-right: 5000px solid rgba( 0,123,182,1);
}
.med.left .top:after {
border-right: 5000px solid rgba( 0,179,220,1);
}
.light.left .top:after {
border-right: 5000px solid #87d3e1;
}
.row:last-child .bottom {display:none;}
.row:first-child .top {display:none;}
</style>
</head>
<body>
<p>
Some stuff, like a header. <br>
<a href="index.html"> Fixed width version </a>
</p>
<div>
<div class="row left dark">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
<div class="row right med">
<div class="top"> </div>
<img src="sample.jpg">
<p>
This will break if the content exceeds the height of the row.
</p>
<div class="bottom"> </div>
</div>
<div class="row left light">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
<div class="row right dark">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
<div class="row left med">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
<div class="row right light">
<div class="top"> </div>
<img src="sample.jpg">
<p>
Lorem ipsum
</p>
<div class="bottom"> </div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment