Pk19000 Pk19000 -4 years ago 248
CSS Question

css: slightly angled border radius

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

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

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

<div class="div">
<div class="box"></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 Source

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;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download