@1ss1za

Как сделать вырез в border?

Как сделать вырез в border?
5d9e1c35d4d63439649997.png
  • Вопрос задан
  • 252 просмотра
Решения вопроса 2
@yarnstart
Превозмогание и React
Либо треугольник svg с верхней границей зеленого цвета, которая закроет белый бордер сверху, либо так:
Ответ написан
Комментировать
@Val_Ery_1
Ещё вариант:
<div class="container"><a href="#">Text</a></div>
a {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 1.5rem;
  text-decoration: none;
  padding: 1.5rem 2.5rem;
  border: 1px solid white;
  border-radius: 4px;
  text-indent: 1.5rem;
  color: white;
  display: block;
  position: relative;
}
a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateX(-50%);
  border-top: 1rem solid white;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
}
a::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateX(-50%);
  border-top: calc(1rem - 1px) solid #2aac65;
  border-left: calc(1rem - 1px) solid transparent;
  border-right: calc(1rem - 1px) solid transparent;
}

Codepen
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы