Two column layout with skew

HTML & CSS
1

Hi all

I have a jsfiddle here - http://jsfiddle.net/Lwzb653e/2/

I need to create a simple layout like this - www.ttmt.org.uk/block.png
this is just an image so will just scale.

Is there a way to create this with css so the columns are slanted but the content straight or do I just have to create a big background image and then center it.

In the jsfiddle I’m using bootstrap. I have a background image so the colors are full width. I then have columns that I skew and content inside that is skewed the oppsite direction to straighten it.

This seems to work but I have to set a height which won’t work as the height will change.

Is there an easier way of doing this.

2

The easy way to do that these days is with CSS3 gradients. Here’s a rough example, though I’m not very good at this stuff yet, and I’m sure it could be refined to get a better result:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
	height: 600px;
	background: linear-gradient(-70deg,#f00 50%,#000 50%);
}

</style>
</head>
<body>

<div></div>

</body>
</html>
1 Like
3

Ralph’s method is definitely the way to go as it is so straight forward and simple.

You can skew the box but results are awkward because of the skew. You could do something like this (just for fun):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
    background:#222
}
.wrap {
    display:table;
    max-width:980px;
    margin:50px auto;
    position:relative;
    font-size:18px;
    table-layout:fixed;
    border-collapse:collapse;
}
.column {
    padding:20px 100px 20px 30px;
    display:table-cell;
    vertical-align:top;
    width:50%;
}
.column p {
    position:relative;
    z-index:2;
}
.column1 {
    background:#e81c4c;
    color:#000
}
.column2 {
    background:#000;
    color:#fff;
    padding:20px 30px 20px 100px;
}
.wrap:after {
    content:"";
    position:absolute;
    z-index:1;
    top:0;
    bottom:0;
    left:10%;
    width:44%;
    background:#e81c4c;
    -webkit-transform:skewX(-3deg);
    transform:skewX(-3deg);
}
</style>
</head>

<body>
<div class="wrap">
        <div class="column column1">
                <p>Paroxysm of global death galaxies, two ghostly white figures in coveralls and helmets are soflty dancing billions upon billions paroxysm of global death as a patch of light vanquish the impossible star stuff harvesting star light made in the interiors of collapsing stars explorations a billion trillion radio telescope made in the interiors of collapsing stars across the centuries, Flatland. At the edge of forever, Jean-François Champollion the ash of stellar alchemy finite but unbounded hundreds of thousands the sky calls to us dream of the mind's eye citizens of distant epochs, are creatures of the cosmos, as a patch of light. Galaxies Orion's sword muse about.</p>
        </div>
        <div class="column column2">
                <p>Not a sunrise but a galaxyrise tendrils of gossamer clouds, astonishment, something incredible is waiting to be known, extraplanetary kindling the energy hidden in matter how far away courage of our questions cosmic fugue a billion trillion of brilliant syntheses, Hypatia decipherment galaxies shores of the cosmic ocean decipherment? Tunguska event, quasar gathered by gravity cosmos, how far away, circumnavigated Tunguska event.</p>
        </div>
</div>
</body>
</html>

But I would stick with Ralph’s method :smile:

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.