Diagonal Gradient in Ie

Fill missing diagonal gradient at the right and left sides of the browser

The diagonal gradient created with border-image property kind of works like this (this is not the exact working but a sample to help understand how its produced) :

A diagonal gradient is added for the entire body of a lower layer.
The areas other than the border-width are clipped so that the inner part is transparent. (You can otherwise visualize it like placing a layer with white background on top of the diagonal gradient layer with height and width = height and width of container - border width).

The below is a visualization of how it is created. You can see that the div has the diagonal gradient whereas the div:after masks the inner part by using the white background that is assigned to it . If you can mimic this approach for your case then it is very good because this is the easiest and most recommended CSS method. You could of-course use CSS or SVG clip-path to clip the inner part but the problem with clip-path is that IE provides no support whatsoever.

.diagonal-gradient{

  position: relative;

  height: 200px;

  width: 200px;

  background-image: linear-gradient(to top left, rgb(254,23,144), rgb(254,151,52));

}

.diagonal-gradient:after{

  position: absolute;

  content: '';

  height: calc(100% - 40px);

  width: calc(100% - 40px);

  top: 20px;

  left: 20px;

  background: white;

}

<div class='diagonal-gradient'></div>

How to draw a perfect diagonal with linear-gradient

You can use a to [side] [side] linear gradient which is transparent except for the thickness of the diagonal like in the below snippet.

(Border is added only for demo and is not actually required for the gradient to work.)

div {

  display: block;

  width: 100px;

  height: 100px;

  border: 1px solid;

  margin: 10px;

}

.border-2px {

  background: linear-gradient(to bottom left, transparent calc(50% - 2px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 2px)) no-repeat 0px 0px / 100px 100px;

}

.border-1px {

  background: linear-gradient(to bottom left, transparent calc(50% - 1px), red 50%, transparent calc(50% + 1px)) no-repeat 0px 0px / 100px 100px;

}

.border-1px.small {

  height: 10px;

  width: 10px;

  background: linear-gradient(to bottom left, transparent calc(50% - .5px), red 50%, transparent calc(50% + .5px)) no-repeat 0px 0px / 10px 10px;

}

.border-1px.small-2 {

  height: 10px;

  width: 10px;

  background: linear-gradient(to bottom left, transparent calc(50% - 1px), #EEE calc(50% - .5px), red 50%, #EEE calc(50% + .5px), transparent calc(50% + 1px)) no-repeat 0px 0px / 10px 10px;

}

.border-1px.small-3 {

  background: linear-gradient(to bottom left, transparent calc(50% - .5px), red 50%, transparent calc(50% + .5px)) no-repeat 0px 0px / 10px 10px;

}

.border-1px.small-4 {

  background: linear-gradient(to bottom left, transparent calc(50% - 1px), #EEE calc(50% - .5px), red 50%, #EEE calc(50% + .5px), transparent calc(50% + 1px)) no-repeat 0px 0px / 10px 10px;

}

<div class='border-2px'></div>

<div class='border-1px'></div>

<div class='border-1px small'></div>

<div class='border-1px small-2'></div>

<div class='border-1px small-3'></div>

<div class='border-1px small-4'></div>

Blend diagonal linear gradients

You have one posibility, without changing much your current approach.

Just set the red stripes twice, the first without transparency. On top, set the blue stripes, and on top set againg the red ones, now with alpha:

div {

  width: 50px;

  height: 100px;

  border: solid 2px black;

  float: left;

  margin: 10px;

  font-size: 30px;

  font-weight: bold;

}

.caro-pattern3 {

  background-color: #2ECC40;

  background-image: 

  linear-gradient(45deg, rgba(255, 0, 0, .5) 5%, transparent 5%, transparent 45%, rgba(255, 0, 0, .5) 45%, rgba(255, 0, 0, .5) 55%, transparent 55%, transparent 95%, rgba(255, 0, 0, .5) 95%), 

  linear-gradient(-45deg, blue 5%, transparent 5%, transparent 45%, blue 45%, blue 55%, transparent 55%, transparent 95%, blue 95%), 

  linear-gradient(45deg, red 5%, transparent 5%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 95%, red 95%);

  background-size: 50px 50px;

}

<div class="caro-pattern3">3</div>

background image, linear gradient jagged edged result needs to be smooth edged

Unfortunately, this always happens when we use angled linear-gradient images and currently the only way to overcome this behavior seems to be to avoid hard-stopping of the colors (that is, don't make the stop point of one color as the start point of the next). Making the second color start a little farther away from the stop point of the first color would kind of create a blurred area and make it look more smoother. This is still not 100% perfect but is better than having jagged edges.

.lefttriangle {
  width: 100%;
  height: 10px;
  left: 0px;
  top: 0px;
  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%); /* note the change of stop and start points */
}
.righttriangle {
  width: 100%;
  height: 10px;
  right: 0px;
  top: 0px;
  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);  /* note the change of stop and start points */
}

body,

html {

  height: 100%

}

.image {

  width: 1410px;

  margin-right: auto;

  margin-left: auto;

  height: 500px;

  overflow: hidden;

  position: relative;

}

.pointer {

  height: 50px;

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

}

.triangleWrapper {

  width: 50%;

  height: 50px;

  float: left;

}

.lefttriangle {

  width: 100%;

  height: 10px;

  left: 0px;

  top: 0px;

  background-image: linear-gradient(to right top, #ffffff 48%, transparent 50%);

}

.righttriangle {

  width: 100%;

  height: 10px;

  right: 0px;

  top: 0px;

  background: linear-gradient(to left top, #ffffff 48%, transparent 50%);

}

<div class="image">

  <img src="http://placekitten.com/1410/500">

  <div class="pointer">

    <div class="triangleWrapper">

      <div style="height: 100%;" class="lefttriangle"></div>

    </div>

    <div class="triangleWrapper">

      <div style="height: 100%;" class="righttriangle"></div>

    </div>

  </div>

</div>

Diagonal Gradient in Ie

Fill missing diagonal gradient at the right and left sides of the browser

How to draw a perfect diagonal with linear-gradient

Blend diagonal linear gradients

background image, linear gradient jagged edged result needs to be smooth edged

Related Topics

Leave a reply