CSS Linear Gradient with Triangle starting 46% - css

Question

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!

Answer 1

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;
}