How to make skewed containers in react.js

Ever wondered how some websites render skewed containers? In this blog post I will show you how to create skewed containers in react using a component module called sc-react. First we need to create a react app using the create-react-app cli.

$ create-react-app skewed-example
$ cd skewed-example/ && yarn start

Then lets add sc-react (https://github.com/josephmaxim/sc-react)

$ yarn add sc-react
or
$ npm install -save sc-react

Now that we finished generating a fresh react app lets remove the default code from the cli and import sc-react. We can begin using the <SkewedContainer> component and add a top and bottom prop with "left" or "right" value depending on the direction of skew you want to render. You can also try removing the top prop to remove top skew; vice versa.

You can change the background color by adding bgColor prop and assigning the value to a hex code or RGBA.(grey is the default prop value).

import React, { Component } from 'react';
import './App.css';

import SkewedContainer from 'sc-react';
class App extends Component {
  return (
    <div>
      <SkewedContainer bottom="left" bgColor="#34495e">
        <h1 style={{textAlign:"center"}}>Hello World!</h1>
      </SkewedContainer>
    </div>
  );
}
export default App;

Output should be:

Skewed container

Background Image

Now lets try to add a background image. You would normally just add a className or do it in the style prop but sc-react uses ::before and ::after css pseudo-element to generate the skew therefore it is not possible to add a background image seamlessly(you can try adding a class containing a bg-image to see what I mean). but there is a better way of implementing a background image; By adding a div between<SkewedContainer>s.

// App.js
import React, { Component } from 'react';
import './App.css';
import SkewedContainer from 'sc-react';

class App extends Component {
    render() { 
        return (
            <div>
                <SkewedContainer bottom="left" bgColor="#ffffff" noMargin>
                    <div className="container">
                        <h1>Skewed Container Example</h1>
                    </div>
                </SkewedContainer>
                <div className="bg-image1">
                    <div className="container">
                        <h2>Content Here</h2>
                    </div>
                </div>
                <SkewedContainer top="left" bottom="left" bgColor="#ffffff" noMargin>
                    <div className="container">
                        <h2>More Content Here</h2>
                    </div>
                </SkewedContainer>
                <div className="bg-image2">
                    <div className="container">
                        <h2>Even More Content Here</h2>
                    </div>
                </div>
                <SkewedContainer top="left" bgColor="#ffffff" noMargin>
                    <div className="container">
                        <h2>This Is The Footer Content</h2>
                    </div>
                </SkewedContainer>
            </div>
        );
    }   
}

export default App;

As you can see we added a noMargin prop to remove the skew margins. you can experiment by adding and removing it to see the difference. Now lets add styling and a background image from Unsplash.

/* App.css */
.bg-image1 {
  background: url('https://source.unsplash.com/4uojMEdcwI8/1600x900') no-repeat center;
  background-size: cover;
  width: 100%;
  min-height: 600px;
  color: #fff;
}

.container {
  width: 980px;
  margin: 0 auto;
  padding: 100px 0px;
  text-align: center;
}

.bg-image2 {
  background: url('https://source.unsplash.com/C86mMbDWL-I/1600x900') no-repeat center;
  background-size: cover;
  width: 100%;
  min-height: 600px;
  color: #fff;
}

And thats it!

Final example

List of available props:

  • className(string) - for adding css class on parent skew container
  • style(object) - adding inline styles
  • top(string)- set top skew “left” or “right”
  • bottom(string)- set bottom skew “left” or “right”
  • noMargin(bool)- remove skew margins
  • bgColor(string)- adding background color
  • skew(number)- changing skew value, default value is 3.

You can download the full source code here: https://github.com/josephmaxim/skewed-example