CSS граница на преобразованном узле

Question

У меня есть узел HTML, на котором я установил очень жирную границу и преобразование, которое масштабируется и вращается с помощью CSS.По какой-то причине после трансформации на внешней стороне границы появляется очень тонкая дополнительная граница в цвете самого узла снаружи, как если бы фон узла простирался ниже границы, а граница была не очень большой.достаточно, чтобы покрыть цвет фона.

.transform {
  transform: scale(1, .7) rotate(45deg);
}
.container {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  border: 20px solid white;
}

<div class="container">proper white border</div>
<div class="container transform">slim orange border around actual white border</div>

Обратите внимание, что в верхнем поле не заметно, что граница установлена, поскольку ее цвет установлен на белый, а в нижнем - белыйрамка окружена еще одной тонкой рамкой цвета рамки.

Есть ли что-то, чтобы этого не происходило?

Answer 1

Use background-clip: padding-box;

.transform {
  transform: scale(1, .7) rotate(45deg);
}
.container {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  border: 20px solid white;
  background-clip: padding-box;
}

<div class="container">proper white border</div>
<div class="container transform">slim orange border around actual white border</div>

Answer 2

Вы можете настроить свойство background-clip, чтобы избежать этого.По умолчанию установлено значение border-box:

border-box

Фон распространяется до внешнего края границы (но под границей в z-порядке).

.transform {
  transform: scale(1, .7) rotate(45deg);
}
.container {
  width: 100px;
  height: 100px;
  background-color: chocolate;
  border: 20px solid white;
  background-clip:content-box; /*OR padding-box*/
}

<div class="container">proper white border</div>
<div class="container transform">slim orange border around actual white border</div>

При padding-box или content-box фон не будет распространяться до границы.