Как добиться округления нескольких строк без псевдоэлементов? - PullRequest
Новая
       53

Как добиться округления нескольких строк без псевдоэлементов?

0 голосов
/ 27 апреля 2020

Я хочу реализовать следующий дизайн с CSS. Вот проблема с кодом ниже. 

* {
  box-sizing: border-box;
}

body {
  margin: 50px;
}

a {
  text-decoration: none;
}

.box {
  display: flex;
  width: 80px;
  height: 200px;
  writing-mode: vertical-lr;
  border-radius: 20px 0 0 20px;
  background: green;
}

.box-link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: white;
  border: 3px solid black;
  border-radius: 20px 0 0 20px;
}

.box:hover {
  background: white;
}

.box-link:hover {
  color: black;
  box-shadow: 0 0 0 10px white, 0 0 0 11px black;
}
<div class="box">
  <a href="#" class="box-link">Hello, World!</a>
</div>

То есть даже при наведении курсора на область с тенью не применяется стиль наведения.

Я видел решения на некоторые темы, но я не могу закончить sh дизайн, который я хочу достичь чуть больше. Также я не могу использовать псевдоэлементы или добавлять элементы.

Фрагмент кода dr aws тень от рамки, но вы даже можете нарисовать это внутри элемента (вставка тени от рамки). Как добиться округления нескольких линий без псевдоэлементов?

...