How to achieve rounded multiple lines without pseudo elements?

Asked Apr 27 '20 at 03:15

Active Apr 27 '20 at 10:44

Viewed 58 times

I want to realize the following design with CSS. Here's the problem with the code below.

* {
  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>

That is, even if you hover the box-shadow part, the hover style is not applied.

I've seen solutions on some topics, but I can't finish the design I want to achieve in a little more. Also I cannot use pseudo-elements or add elements.

The code snippet draws a box-shadow on the outside, but you can even draw this inside the element (the inset of the box-shadow). How to achieve rounded multiple lines without pseudo elements?

edited Apr 27 '20 at 10:44

asked Apr 27 '20 at 03:15

CSSnfn

*the following design* --> where is it? – Temani Afif Apr 27 '20 at 11:41
@TemaniAfif It is the result of the execution of a code snippet. – CSSnfn Apr 27 '20 at 12:00

How to achieve rounded multiple lines without pseudo elements?

0 Answers0