CSS旋转45会导致渐变边界中断

Question

我注意到旋转时CSS边框图像中有轻微可见的中断。有没有办法防止这种方法或另一种方法达到相同的解决方案？

.box {
  margin: 150px;
  width: 250px;
  height: 250px;
  background: lightGray;
  border: 20px solid blue;
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
  border-image-slice: 1;
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.r45 {
  transform: rotate(-45deg);
  color: red;
}

<div class="box">
  <p class="r45">Hello</p>
</div>

Answer 1

实现相同解决方案的另一种方法是使用pseudo:after，如下面的工作示例所示，希望对您有所帮助：）

.box {
  margin: 150px;
  width: 250px;
  height: 250px;
  background: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%);
  transform: rotate(45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.box:after {
  left: 20px;
  right: 20px;
  top: 20px;
  bottom: 20px;
  content: '';
  background: lightGray;
  position: absolute;
}

.r45 {
  transform: rotate(-45deg);
  color: red;
  position: relative;
  z-index: 1;
}

<div class="box">
  <p class="r45">Hello</p>
</div>

Answer 2

您可以使用背景并调整background-clip，这样可以避免边框的奇怪渲染

.box {
  margin: 80px;
  width: 250px;
  height: 250px;
  background: 
    linear-gradient(lightGray,lightGray) padding-box,
    linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) border-box;
  border: 20px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
}

.r45 {
  transform: rotate(-45deg);
  color: red;
}

<div class="box">
  <p class="r45">Hello</p>
</div>