Two-Tone Background Split by Diagonal Line Using CSS

Two-tone background split by diagonal line using css

Here are the examples in action: http://jsbin.com/iqemot/1/edit

You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.

#container {  height: 100px;  width: 100px;  overflow: hidden;  background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);}
#triangle-topleft {  width: 0;  height: 0;  border-top: 100px solid gray;  border-right: 100px solid transparent;}

<div id="container">  <div id="triangle-topleft"></div></div>

How to make Two Diagonal Lines background with CSS in opposite direction?

use two gradients like :

.background {  height: 500px;  background-color: #894325;  background: linear-gradient(172deg, rgba(137, 67, 37, 1) 50%, transparent 50%), linear-gradient(8deg, transparent 50%, rgba(233, 233, 233, 233) 50%);}

<div class="background"></div>

How to create a diagonal background effect, using CSS

You can use linear-gradient on background. See the following example:

body {  height:100vh;  width:100vw;  background:linear-gradient(160deg, red, red 60%, white 60%, white);}

Background color diagonal split responsive

I've resolved my issue :

<div class="background">
      <div class="top"></div>
      <div class="bottom"></div>
</div>

.background {
  position: absolute;
  width: 100%;
  margin: 0 auto;
}
.top {
  height: 100px;
  background-color: #23d6c5;
}
.bottom {
  width: 100%;
  height: 500px;
  background: linear-gradient(to right bottom, #2f3441 50%, transparent 50%);
}

body{  background-color: white;}
.background {  position: absolute;  width: 100%;  margin: 0 auto;}.top {  height: 100px;  background-color: #2f3441;}.bottom {  width: 100%;  height: 500px;  background: linear-gradient(to right bottom, #2f3441 50%, transparent 50%);}

<div class="background">  <div class="top"></div>  <div class="bottom"></div></div>

How to create a diagonal cut background so that it cut exactly on top-right and bottom-left on every screen size

Having a fixed angle will only work for certain screen sizes e.g. 45deg for squares. You can however express the direction of the gradient with keywords like this:

linear-gradient(to right bottom, #17191F, #17191F 50%, #000000 50%, #000000)

This gives a gradient that adjusts its angle to the size of its container (e.g. the screen). Have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient() for more details.

.our-story-section{
    padding: 50px 15px;
    background: #000000;
    color: #ffffff;
    position: relative;
    background: linear-gradient(to right bottom, #17191F, #17191F 50%, #000000 50%, #000000)
}

<section class="our-story-section">
          <div class="container">
            <div class="row">
              <h2 class="section-title">
               Dummy title
              </h2>
              <p class="section-description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id rhoncus odio. In nec eros non ipsum maximus lacinia. Maecenas tristique blandit orci, nec scelerisque odio aliquam a. Pellentesque sed pretium lacus.
              </p>
            </div>
            <div class="row">
              <div class="col-md-6">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ut eveniet architecto laudantium sit dicta deleniti nulla illo accusantium, repellendus minima tempora est tenetur neque esse sapiente nam iusto doloremque.</p>
              </div>
              <div class="col-md-6">
                  <ul>
                    <li>Lifetime service guarantee</li>
                    <li>Over 10 years of experience</li>
                  </ul>
              </div>
            </div>
          </div>
        </section>

css calendar - td background diagonal split - two colors

Since you seem to be using CSS3, I have updated your fiddle using CSS3 gradients : http://jsfiddle.net/9pS3L/1/
It seems to be what you want to achieve.
You should update it with your own colors. Here is a nice gradient tool : http://www.colorzilla.com/gradient-editor/ Should even be IE compatbile, but would make an horiontal gradient (haven't tried it though...)

You can also use SASS and compass, those are nice tools as well to do CSS3.

Trying to do what you wanted to achieve with borders is tricky since that's not what borders have been built for in the first place.

Just for the example, the webkit code :

div{
    width:20px;
    height:20px;
    background: -webkit-gradient(linear, left top, right bottom, color-stop(50%,red), color-stop(50%,green));
}

Two images background inline separate by diagonal border

You can use a clip path

.right {  position: absolute;  left: 0;  top: 0;  -webkit-clip-path: polygon(60% 0, 100% 0%, 100% 100%, 40% 100%);  clip-path: polygon(60% 0, 100% 0%, 100% 100%, 40% 100%);}
.left {  position: absolute;  left: 0;  top: 0;  -webkit-clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);  clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);}
border {  position: absolute;  left: 0;  top: 0;  width: 400px;  height: 300px;  background-color: black;  -webkit-clip-path: polygon(59% 0, 61% 0, 41% 100%, 39% 100%);  clip-path: polygon(59% 0, 61% 0, 41% 100%, 39% 100%);}

<img class="left" src="https://picsum.photos/400/300?random"><img class="right" src="https://picsum.photos/400/300"><border>

Two-Tone Background Split by Diagonal Line Using CSS