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

Вы можете использовать фон и настроить 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>

Answer 2

Другой метод для достижения того же решения - использование 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>