I am try to make a div have borders like the following drawing:
This is what I have tried:
div {
height: 100px;
width: 100px;
border-bottom-right-radius:100px 10px;
border:1px solid #000;
}
<div></div>
What is an effect way to accomplish this?
:before
and :after
:before
:Its height is the same as the border radius
It is positioned just outside with top
and lines up with the left border thanks to left
Its width is calculated with calc
to precisely line up the top of the curve
The curve can be refined with transform: skewX(-60deg)
:after
:calc
div {
border-bottom-right-radius: 100px 20px;
border: 1px solid #000;
border-top: none;
height: 500px;
width: 200px;
position: relative;
border-left: none;
}
div:before,
div:after {
content: '';
display: block;
position: absolute;
left: -1px;
}
div:before {
height: 20px;
width: 100%;
width: calc(100% + 1px);
border-bottom-right-radius: 100px 20px;
border-bottom: 1px solid #000;
border-right: solid 1px #000;
top: -1px;
}
div:after {
height: calc(100% - 18px);
border-left: 1px solid #000;
top: 19px;
}
<div></div>
div {
border-bottom-right-radius: 100px 20px;
border: 1px solid #000;
border-top: none;
height: 200px;
width: 200px;
position: relative;
border-left: none;
}
div:before,
div:after {
content: '';
display: block;
position: absolute;
left: -1px;
}
div:before {
height: 20px;
width: 100%;
width: calc(100% - 36px);
border-bottom-right-radius: 100px 20px;
border-bottom: 1px solid #000;
border-right: solid 2px #000;
top: 0px;
left: 17px;
transform: skewX(-60deg);
}
div:after {
height: calc(100% - 19px);
border-left: 1px solid #000;
top: 20px;
}
<div></div>