As such: https://i.sstatic.net/UdHNE.png
CSS border, clip path, etc?
I've tried the following:
div#box{
width: 38px;
height: 500px;
border: 13px solid black;
border-color: transparent black transparent transparent;
border-radius: 0 100% 100% 0;
}
<div id="box"></div>
But it's not giving me the result I'm looking for (the curve is too subtle).
I've also tried using clip path but the transparent element won't "cut" into the other one obviously since it's transparent.
body {
background-color: lightblue;
}
.one {
height: 500px;
width: 38px;
background-color: white;
clip-path: ellipse(38px 50% at 0% 50%);
position: absolute;
right: 50%;
top: 0;
}
.two {
height: 500px;
width: 38px;
background-color: transparent;
clip-path: ellipse(38px 50% at 0% 50%);
position: absolute;
right: calc(50% + 13px);
top: 0;
}
<div class="one"></div>
<div class="two"></div>
Any help would be greatly appreciated.
Can you please try this and only play with second[180%] and third[-2%] value.
In here we create a required clip-path
than we create another div which will create us a middle space and aplly position: absolute
,overflow:hidden
to create same clip-path in red div and than we set background-color
of middle div as same as screens background-color.
z-index
are need to be .one > .middle > .two
clip-path: ellipse(100% 180% at -2% 50% )
body {
position: relative;
min-height: 100vh;
display: flex;
place-items: center;
background-color: bisque;
}
.one{
position: relative;
height: 500px;
width: 500px;
background-color: green;
clip-path: ellipse(100% 180% at -2% 50% ) ;
z-index: 3;
}
.middle{
position: absolute;
z-index: 2;
height: 500px;
width: 500px;
clip-path: ellipse(100% 180% at -2% 50% ) ;
left:25px;
overflow: hidden;
background-color: bisque;
}
.two{
position: relative;
z-index: 1;
right:25px;
height: 500px;
width: 500px;
background-color: red;
}
<div class="one"></div>
<div class="middle"></div>
<div class="two"></div>