渐变与对角线效果实例页面

展示

代码

• HTML：

  <img>

• CSS：

  img {
      width: 300px; height: 150px;
      width: min(300px, 15vw);
  }
  
  img:not([src]) {
      background-color: #eee;
      background-image: linear-gradient(to right bottom, transparent calc(50% - 1px), #ccc calc(50% - 1px), #ccc, transparent calc(50% + 1px)),
          linear-gradient(to top right, transparent calc(50% - 1px), #ccc calc(50% - 1px), #ccc, transparent calc(50% + 1px));
  }