CSS for slope curverd corner of a DIV

Question

how to achieve this <div> from CSS:

My Attempt:

div {     height: 300px;     background: red;     position: relative; }  div:before {     content: '';     position: absolute;     top: 0; left: 0;     border-top: 80px solid white;     border-right: 80px solid red;     width: 0; } 

I am not able to modify slope section and fill white inside.

Answer 1

My attempt, as posted in comments (http://jsfiddle.net/8Zm96/):

div{     width: 300px;     height: 280px;     background: #fff;     border: solid 1px red;     border-width: 0 1px 1px 1px;     border-radius: 4px;     margin-top: 40px;     position: relative; }  div:before{     content: '';     position: absolute;     top: -20px;     right: -1px;     border: solid 1px red;     border-width: 1px 1px 0 0;     border-radius: 25px 4px 0 0;     height: 24px;     width: 250px;     background: #fff; }  div:after{     content: '';         position: absolute;     top: -20px;     left: 2px;     border: solid 1px red;     border-width: 0 0 1px 0;     border-radius: 0 0 20px 0;     height: 20px;     width: 55px;     background: #fff; } 

Zoomed up close, the left corner doesn't fit, and the two semi-curves actually curve past each other, but none of that is visible at normal zoom. This may be an issue for phones and high-res screens which may display the content zoomed in, or more accurately at the normal zoom.

Answer 2

This is my best try: http://jsfiddle.net/2y7TB/2/

Here is what I have used:

I have only tested it on Chrome, if you like it and want a cross-browser solution please ask :)

LE: Seems to also display correctly on the latest versions of Firefox and Opera.

.tab:before {     content: '';     position: absolute;     top: -23px;     right: -1px;     border-right:1px solid orange;     border-left:1px solid orange;     border-top:1px solid orange;     background:white;     width: 247px;     height:24px;     border-top-right-radius:5px;     border-top-left-radius:25px; }  .tab:after {     content: '';     position: absolute;     top: -9px;     left:1px;     border-right:1px solid orange;     border-bottom:1px solid orange;     border-top:none;     background:white;     width: 53px;     height:9px;     border-bottom-right-radius:180px;     box-shadow:3px 3px 0px 3px white; }