Question

我使用以下CSS制作一个梯形形状的div，使用带角度边框的CSS技巧：

＆＃13;

#slopedDiv {
  position: absolute;
  height: 0;
  width: 100px;
  border-style: solid;
  border-color: #DC0714 transparent;
  border-width: 248px 125px 0 0;
}

＆＃13;

<div id="slopedDiv"></div>

＆＃13;

是否可以对生成的形状应用垂直线性渐变？我尝试使用border-image，但这只会导致它失去角度，直到我能够管理它。

Answer 1

一个选项可能是在伪元素上使用skew()而不是像这样的边框技巧：

＆＃13;

#slopedDiv {
  width: 200px;
  overflow: hidden;
}

#slopedDiv:before {
  content: "";
  display: block;
  height:100px;
  background: linear-gradient(to right, rgba(11, 11, 87, 1) 0%, rgba(150, 66, 87, 1) 100%);
  transform:skew(-25deg) translateX(-50px)
}

＆＃13;

<div id="slopedDiv"></div>

＆＃13;

带文字的斜坡div

＆＃13;

#slopedDiv {
  width: 200px;
  overflow: hidden;
}

#slopedDiv div {
  background: linear-gradient(to right, rgba(11, 11, 87, 1) 0%, rgba(150, 66, 87, 1) 100%);
  transform: skew(-25deg) translateX(-50px);
}

#slopedDiv h2 {
  color: white;
  letter-spacing:2px;
  padding: 25px 30px;
  transform: skew(25deg) translateX(50px);
}

＆＃13;

<div id="slopedDiv">
  <div>
    <h2>My Title Here</h2>
  </div>
</div>

＆＃13;

Answer 2

如果div后面的背景是已知颜色，则可以使用元素背景上的2个渐变来实现此结果。一个是将要看到的渐变，另一个是隐藏它的对角线渐变（在这种情况下，是白色）

＆＃13;

pager = (ViewPager) rootView.findViewById(R.id.pager);
pager.setOffscreenPageLimit(2);// no of fragments

＆＃13;

.test {
  width: 400px;
  height: 300px;
  background-image: linear-gradient(-71deg, white 100px, transparent 100px), linear-gradient(to bottom, green, yellow, blue);
}

＆＃13;

Answer 3

有一种方法可以进行边框图像渐变，如下所示：

https://css-tricks.com/examples/GradientBorder/

从我的测试来看，这不会适用于0的高度。你只能使用伪类来实现这一点，我认为你不能在0高度div上严格使用渐变+梯形。

将渐变应用于倾斜的div

3 个答案:

带文字的斜坡div