CSS

Question

是否可以仅通过 css（无背景图片）来对角线分割背景（如图片所示）？Diagonal hover effect in the menu

Answer 1

如果这是您想要的样式，您可以在 w3schools and MDN

上找到更多信息

.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%);
}

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

Answer 2

是的 - 如果您不想要背景图片，请使用渐变。

如果需要，可以使用此生成器http://www.colorzilla.com/gradient-editor/

CSS - 对角线拆分悬停效果

CSS - diagonal split hover effect

hover

diagonal