CSS 如何实现对角线渐变效果？

css实现特殊效果

有人询问如何使用 css 实现特定样式，类似于下图所示：

[图片展示]

经过研究，有以下 css 实现方法：

[代码演示]

/* 参数可自行调整 */
.container {
  position: relative;
  width: 200px;
  height: 200px;
  background: #fff;
  transform: skew(-10deg);
  overflow: hidden;
}

.container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  background: #000;
  transform: skew(10deg);
}

.container::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background: #fff;
  transform: skew(10deg);
}

演示效果图：

[图片展示]

需要注意的是，此方法参数需要进行微调才能达到理想的效果。

以上就是CSS 如何实现对角线渐变效果？的详细内容，更多请关注其它相关文章！