is it possible to create a background like this using css3?

Question

I have a requirement to set this background on a web page and I'm using this image to do that, but I believe there should a way to do this using CSS3, I know you can draw diagonals using css3 but not sure how to color the rest of the box using css3.

Thanks in advance!

Whenever dealing with shapes, a google search for: CSS shapes, always yields the best answer: https://css-tricks.com/examples/ShapesOfCSS/ — AGE, Nov 23 '15 at 19:21

This Guy · Answer 1 · 2015-11-23T19:45:58.813

Yes it's possible. Feel free to change the classes to suit your needs.

CSS:

body {
    position: relative;
}
.options_wrapper {
    width: 500px; /* Change to suit your needs */
    height: 80px; /* Change to suit your needs */
    position: absolute;
    top: 0;
    right: 0;
}
.options {
    width: 100%;
    height: 100%;
    box-shadow: 1px 0 rgba(0, 0, 0, 0.15);
    float: left;
    position: relative;
    overflow: hidden;
}
.options:before {
    width: 100%;
    height: 100%;
    background: #8A0808;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 1px 0 rgba(255, 255, 255, 1);
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    transform: skewX(45deg); /* Change to suit your needs */
}

HTML:

<div class="options_wrapper">
    <div class="options"></div>
</div>

Here is a Demo: jsFiddle DEMO

score 1 · Answer 2 · answered Nov 23 '15 at 19:40

For the most basic implentation, you need just 3 things:

An element which can have a border;
A colored border-top;
A transparent border-left;

div { 
border-left: 60px solid transparent;
border-top: 60px solid rgba(140, 25, 29, 1);
}

<div> 
</div>

score 1 · Accepted Answer · answered Nov 23 '15 at 21:44

Thanks everyone, I see there are many different ways to achieve the same result, However as I needed to have this pattern as a background for my menu, I ended up using the bellow style:

.navbar {
background: linear-gradient(45deg, white 25%, 
    rgba(140, 25, 29, 1) 25%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
height: 90px;   
 }

score 0 · Answer 4 · edited May 23 '17 at 10:29

I would just put a "triangle" on it and position it on the left so it skews. You can look at the transform: skew for css3, but this way it's not needed. If you wanted - here's a good example

Just make a box w/ a certain height and through the white triangle on there. overflow will hide (if you have another color as the background).

Here's your fiddle

<div class="container">
    <div id="box"></div>
<div>

.container {
    width: 100%;
    overflow: hidden;
}
#box {
    background-color: red;
    position: relative;
    height: 150px;
}
#box:before {
    position: absolute;
    content:'';
    border-bottom: 150px solid white;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    left: -150px;
    bottom: 0;
}

score 0 · Answer 5 · edited May 23 '17 at 11:55

I made an example based off my estimation on what you're looking for... by estimate I mean I don't know the exact skew angle, so I winged it for 45 degrees:

Link to JSFiddle

HTML

<div class="container">
    <div id="parallelogram">
    </div>
</div>

CSS

.container{
    overflow:hidden;
}
#parallelogram {
    width: 100%;
    height: 100px;
    margin: 0 0 0 45px;
    -webkit-transform: skew(40deg);
       -moz-transform: skew(40deg);
         -o-transform: skew(40deg);
    background: #8C191D;
    overflow:hidden;
    position:relative;
    -moz-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
    -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,.5);
    box-shadow: 1px 2px 3px rgba(0,0,0,.5);
}

Reference:

Your "example" looks a lot like this, just sayin' - http://stackoverflow.com/questions/19761202/css3-transform-skew-one-side — Rob Scott, Nov 23 '15 at 19:30
Exactly, I am going to reference that on my edit so how about that — AGE, Nov 23 '15 at 19:31

is it possible to create a background like this using css3?

5 Answers5