CODEWITHSUNDEEP
htmlcssborder
Karim Pazoki
Karim Pazoki

Reputation: 969

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

Upvotes: 0

Views: 161

Answers (1)

Andrei Fedorov
Andrei Fedorov

Reputation: 3977

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>

Upvotes: 5

Related Questions