thadeuszlay thadeuszlay - 6 months ago 16
HTML Question

Creating multiple outward border radi with CSS

I want to create 4 outward border radi around a rectangular. I want to create the border in the red circle (but not only one but in sum 4 around the rectangular so it looks like a "capital I")

enter image description here

That "capital I" should resize appropriately when you change the window size. So, the outward borders should be "attached" to the vertical rectangular.

These are the options I can think of how to achieve it:
1) shadow box
2) after/before element

But these solution the outward borders don't stay attached to the vertical rectangular.

Here an example for option 2)

div {
background-color: black;
margin: 0 auto;
}
.one {
height: 80vh;
width: 300px;
}
.bar {
height: 10vh;
width: 450px;
}
.one:before {
content: '';
position: absolute;
left: 115px;
height: 50px;
width: 50px;
border-bottom-right-radius: 50px 50px;
border-bottom: 1px solid #000;
border-right: solid 1px #000;
top: 81.3vh;
background-color: white;
box-shadow: 22px 22px 0 22px black;
}


https://jsfiddle.net/97khrvps/1/

You'll see that the outward border is off, once you change the window size. (Furthermore it's not possible to create more then 2 outward borders with the option 2) )

Is there a solution with CSS only where you can create outward borders that stay attached to the vertical rectangular even though you change the window size?

Answer

My first suggestion here is to just use a single element to represent the letter, rather than making it in three parts (top bar, bottom bar, middle column). Geometrically, that makes the problem significantly simpler - rather than adding in four "negative" rounded corners to the shape, you just need to subtract two partially rounded rectangles from it.

I shuffled around your CSS, removing the bar elements and completing the style blocks for .one:before and .one:after. I also removed the 1px borders - you can add those back in if you want, though it'll take some tweaking (potentially calc() in some places). Otherwise, you were pretty close to a solution, even if you didn't know it:

div {
  background-color: black;
  margin: 0 auto 0 auto;
}
.one {
  height: 100vh;
  width: 450px;
  ;
  position: relative;
}
.one:before,
.one:after {
  content: '';
  position: absolute;
  height: 80vh;
  width: 75px;
  top: 10vh;
  background-color: white;
}
.one:before {
  left: 0;
  border-top-right-radius: 50px 50px;
  border-bottom-right-radius: 50px 50px;
}
.one:after {
  right: 0;
  border-top-left-radius: 50px 50px;
  border-bottom-left-radius: 50px 50px;
}
<div class="one"></div>

Hope this helps! Let me know if you have any questions.