CODEWITHSUNDEEP
css
Kumar Gaurav
Kumar Gaurav

Reputation: 939

CSS for slope curverd corner of a DIV

how to achieve this <div> from CSS:

enter image description here

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.

Upvotes: 33

Views: 3495

Answers (4)

mehdi
mehdi

Reputation: 1755

maybe this code? jsFiddle , I'm not sure that you want, but it's work in all Browsers..

HTML:

<div class="head">&nbsp;</div>
<div class="bdy"><div class="mask"></div>&nbsp;<br><br><br><br><br><br></div>

CSS:

.head{    
    border-top: 1px solid #ffccff;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-radius: 40px 7px 0 0 ;
    margin-left: 20%;
}
.bdy{
    border-radius: 3px 0 3px 3px;
    border-top: none;
    border-left: 1px solid #ffccff;
    border-right: 1px solid #ffccff;
    border-bottom: 1px solid #ffccff;
}
.mask{

    top:-1px;
    left:1px;
    width:20%;
    height: 1px;
    background-color:#ffccff;
}

Upvotes: 4

Christoph
Christoph

Reputation: 51201

You could do this with css, but it's a lot of fiddling (=potential crossbrowser issues). I set up a fiddle on how to do it with CSS. However one can see some disturbances within the border (especially when zooming). It's just a sketch though and could be optimized of course.

The better and crossbrowser reliable solution would be to just use a background image in the position marked below. You can use a pseudoelement for that if you want to.

enter image description here

Basically I build the slope with two rotated & skewed pseudo elements. This solution is superior to the ones using only border-radius (which I think is very suboptimal because browsers render rounded corners quite differently) but needs compatible browsers due to the transform.

#head:before,#head:after {
    content:"";display:block;
    height:40px; 
    width:70px;
    border-left:2px solid orange;
    border-top:2px solid orange;
    transform:skewX(-45deg);
    border-top-left-radius:10px;
    position:relative;
    top:-2px;
    left:-40px;
}
#head:after {
    transform:rotate(180deg) skewX(-45deg);
    left:-180px;bottom:32px;top:auto;
    width:128px;
}

Upvotes: 8

Gareth Cornish
Gareth Cornish

Reputation: 4356

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.

Upvotes: 16

XCS
XCS

Reputation: 28147

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

Here is what I have used: enter image description here

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;
}

Upvotes: 9

Related Questions