如何使用CSS做对角线

Question

我正在尝试使用CSS创建一条对角线，如下图所示，但我不知道该怎么做。

您能指导我怎么做吗？

.container {
  position: relative;
  background: #632878;
  background: -moz-linear-gradient(-45deg, #632878 9%, #862453 56%, #a83a39 100%);
  background: -webkit-linear-gradient(-45deg, #632878 9%, #862453 56%, #a83a39 100%);
  background: linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
  background-repeat: repeat;
  width: 200%;
  height: 100vh;
  background-attachment: fixed;
  overflow: hidden;
}

.container:before {
  content: '';
  position: absolute;
  left: 1%;
  width: 20%;
  height: 160%;
  background-color: rgb(255, 255, 255);
  /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  -webkit-transform: rotate(55deg);
  -moz-transform: rotate(55deg);
  transform: rotate(55deg);
}

<div class="container">
  <!-- Content... -->
</div>

Answer 1

您可以考虑多个背景。这是一个示例：

.container {
  margin: 0;
  background: 
    linear-gradient(to top right,   transparent 49.5%, rgba(255, 255, 255, 0.5) 50%) 50% calc(50% + 60px/2 + 80px/2)/100% 80px,
    linear-gradient(to bottom right,transparent 49.5%, rgba(255, 255, 255, 0.5) 50%) 50% calc(50% - 60px/2 - 120px/2)/100% 120px,
    linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5)) center/100% 60px,
    
    linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
  background-repeat: no-repeat;
  height: 400px;
  width:400px;
  overflow: hidden;
}

<div class="container">

</div>

或如下所示的剪辑路径：

.container {
  margin: 0;
  background:
    linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
  background-repeat: no-repeat;
  height: 400px;
  width:400px;
  position:relative;
}
.container::before {
  content:"";
  position:absolute;
  top:80px;
  bottom:50px;
  left:0;
  right:0;
  background:rgba(255, 255, 255, 0.5);
  -webkit-clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 75%);
   clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 75%);  
}

<div class="container">

</div>

关于旋转和透视的另一个想法：

.container {
  margin: 0;
  background:
    linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
  background-repeat: no-repeat;
  height: 400px;
  width:400px;
  position:relative;
  overflow:hidden;
}
.container::before {
  content:"";
  position:absolute;
  top:140px;
  bottom:120px;
  left:0;
  right:0;
  background:rgba(255, 255, 255, 0.5);
  transform:perspective(200px) rotateY(-25deg);
  transform-origin:left;
}

<div class="container">

</div>