Как сделать таку скобку на чистом css?

Чтобы создать скобку при помощи CSS, можно использовать псевдоэлементы ::before и ::after

HTML:

<div class="bracket">Текст</div>

CSS:

.bracket {
  position: relative;
  padding-left: 20px;
}

.bracket::before,
.bracket::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  background-color: black;
}

.bracket::before {
  top: 0;
  left: 0;
  transform: skew(-15deg);
}

.bracket::after {
  top: 0;
  right: 0;
  transform: skew(15deg);
}

В данном примере мы создаем блок с классом "bracket" и устанавливаем ему относительное позиционирование и отступ слева. Затем мы используем псевдоэлементы ::before и ::after для создания левой и правой частей скобки.

Для каждого псевдоэлемента мы устанавливаем пустое содержимое, абсолютное позиционирование, ширину и высоту, и цвет фона через свойство background-color.

Для левой части скобки (::before) мы устанавливаем верхнюю и левую позицию, а также трансформацию skew с отрицательным значением для наклона скобки влево.

Для правой части скобки (::after) мы устанавливаем верхнюю и правую позицию, а также трансформацию skew с положительным значением для наклона скобки вправо.

Таким образом, блок с классом "bracket" будет отображать текст с двумя скобками по бокам. Вы можете настроить размер и стиль скобки, а также цвет фона, чтобы соответствовать вашим потребностям.