Pk19000 Pk19000 - 3 months ago 20
CSS Question

css: slightly angled border radius

I wanna create a sticky note with html and css.
my code is like this:



.div{
margin:50px;
position:relative;
}
.box {
background: #ff1;
height: 178px;
width: 409px;
margin: 25px;
/*padding: 20px;*/
position: relative;
overflow: hidden;

border-left: 0px;
border-top-left-radius:70px;
border-bottom-right-radius:30px
}
.box:before {
content: "";
display: block;
background: #fff;
position: absolute;
top: -38px;
left: -268px;
width: 310px;
height: 248px;
border-bottom-right-radius: 70px;
padding:0px;
}

<div class="div">
<div class="box"></div>
</div>





My problem is the right-button
It is quite curves. But I would be slightly angled. Like what you see in the image.
Can any body help me please? Thanks.

enter image description here

Answer

div {
  width: 200px;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
}
div:after {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 150px;
  border-radius: 0 0 90% 0/0 0 60% 0;
  background-color: white;
}
<div></div>

Comments