Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Curved sail shape using HTML and CSS only?

Is it possible to create the curved sail shape below using HTML and CSS only?

sail shape

I can see from this answer that I could create a straight-sided sail using:

#triangle {
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

which looks like:

straight sided sail

or I can get a bit closer with border radius:

#sail {
    background: #ff0000;
    width: 50px;
    height: 100px;
    border-top-right-radius: 50px 100px;
    -moz-border-radius-topright: 50px 100px;
    -webkit-border-top-right-radius: 50px 100px;
    -khtml-border-radius-topright: 50px 100px;
}

which looks like this:

curved sail shape

but isn't quite as elegant as I'd like really. The sail image at the top has a gentle, elegant curve to it.

Can I do better without using images?

like image 642
user114671 Avatar asked Apr 05 '12 09:04

user114671


1 Answers

I try my self may be that's you want.

.sail{
    width: 50px;
    height: 100px;
    position:relative;
    overflow:hidden;
}
.sail:after{
    width:200px;
    height:200px;
    content:'';
    position:absolute;
    right:0;
    top:-5px;
    -moz-border-radius:100px;
    border-radius:100px;
    background: #ff0000;
}

check this http://jsfiddle.net/wtENa/

like image 98
sandeep Avatar answered Sep 27 '22 21:09

sandeep