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....

问题:

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!


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

  • 发表于 2018-07-11 18:04
  • 阅读 ( 271 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除