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

发布日期： 2024-10-22 阅读量： 作者： 网络

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 # overflow

上一篇: win7可装的pr软件有哪些？

下一篇: 微信小程序开发之详解Nginx的环境配置

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

随便看看