Подскажите, как сделать блок со скошенными углами и бордером

108

24 декабря 2021, 10:00

Подскажите, как сделать блок со скошенными углами и бордером. внутри текст. Если применить transform skew, то текст тоже скашивает.

Answer 1

Вариант 1: Вложить текст в еще один блок и применить к нему обратную трансформацию:

.outer { 
  padding: 1em; 
  background: blue; 
  border: 3px solid red; 
  width: 100px; 
  text-align: center; 
  transform: skewX(-10deg); 
} 
 
.inner { 
  color: #fff; 
  font-size: 2em; 
  transform: skewX(10deg); 
}

<div class="outer"> 
  <div class="inner">text</div> 
</div>

Вариант 2: громоздить псевдоэлемент (зеленая тень - для наглядности, показывает сам блок с текстом):

.skew { 
  width: 200px; 
  position: relative; 
  box-shadow: 0 0 10px green inset; 
  padding: 1em; 
  font-size: 20px; 
  color: #fff; 
  text-align: center; 
} 
 
.skew:after { 
  content: ""; 
  background: blue; 
  border: 3px solid red; 
  display: block; 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  transform: skewX(-20deg); 
  z-index: -1; 
}