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!