html - Css Rotate 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>