Question

在wordpress网站上，我想制作一个具有100％覆盖菜单的渐变标题，但在面包屑中，我希望它是白色三角形。

我创建了一个小提琴，因为很难解释。

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

主体CSS和CSS类三角形标头是我目前正在运行以使其正常运行，但具有负空白的功能，我真的不喜欢。

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
}

因此，基本上，我想在身体渐变的46％处开始三角形，并将2个CSS代码合并到身体类别中。

onecodebody是我当前尝试合并2个属性的方法，但是它不起作用，因为我怀疑我无法将参数传递给已经定义的线性函数的左下角。

是否有一种方法可以为body标签定义一个渐变属性，使其看起来像我的小提琴一样？

祝大家有美好的一天！

Answer 1

使用这样的多个渐变以具有透明度：

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

或者如果您想同时保留两种颜色并在上方保留白色部分以创建三角形，则如下所示：

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

CSS线性渐变，三角形起始为46％

1 个答案: