Question

是否可以通过css（没有背景图像）进行对角线分割背景（如图像上所示）？Diagonal hover effect in the menu

Answer 1

类似于this？

如果这是所需的样式，您可以在w3schools和MDN上找到更多信息

＆＃13;

.btn {
  width: 250px;
  height: 60px;
  margin: 25px;
  border-radius:4px;
  background: linear-gradient(to bottom right, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%);
}

＆＃13;

<button class="btn">Button
</button>

＆＃13;

Answer 2

是的 - 如果你不想要背景img，请使用gradiant。

如果您需要http://www.colorzilla.com/gradient-editor/

，可以使用此生成器

CSS - 对角线分割悬停效果

2 个答案: