CODEWITHSUNDEEP
csslinear-gradients
Vlar
Vlar

Reputation: 21

CSS Linear Gradient with Triangle starting 46%

On a wordpress website, i would like to make a header with a gradient which covers the menu in 100% but then in the breadcrumbs i would like it to be white triangle shape.

I have create a fiddle as it is quite hard to explain.

https://jsfiddle.net/hoststage/o04qfpr9/

The body CSS and the CSS class triangle header is what i'm currently running to make it work but with negative margin which I really don't like. 

body {  
background-color: #F4F4F4;
background-image: -moz-linear-gradient( 97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%);
  background-image: -webkit-linear-gradient( 97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%);
  background-image: -ms-linear-gradient( 97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%);
  position: absolute;
  z-index: 270;
  background-repeat: no-repeat !important;
  background-size:1920px 270px;
  background-position: center top;

}

.triangle-header {
    width:1920px !important;
    height:195px;
    background: linear-gradient(to top left, white 50%, transparent 0%),
     transparent 0%;
     margin-top: -170px
}

SO basically, i would like to start the triangle at 46% of the body gradient and merge the 2 CSS codes into the body class.

The onecodebody is my current attempt at merging the 2 properties but it doesn't work as I suspect i can't pass the argument to the bottom left inside an already defined linear.

Is there a way to define one gradient property for the body tag which would make it look like what I have in my fiddle?

Great day to you all!

Upvotes: 2

Views: 329

Answers (1)

Temani Afif
Temani Afif

Reputation: 272937

Use multiple gradient like this to have transparency:

body {
  height:200px;
  background:
    linear-gradient(rgb(145,79,145),rgb(145,79,145)) top/100% 46% no-repeat,
    linear-gradient(to bottom right,rgb(145,79,145) 50%,transparent 50.5%) bottom/100% 55% no-repeat;
}

Or like this if you want to keep both colors and have the white part above to create the triangle shape:

body {
  height:200px;
  background:
    linear-gradient(to bottom right,transparent 50%,white 50.5%) bottom/100% 55% no-repeat,
    linear-gradient(97deg, rgb(145,79,145) 0%, rgb(168,100,168) 100%) top/100% 100% no-repeat;
}

Upvotes: 0

Related Questions