8

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?

Community
  • 1
  • 1
user114671
  • 532
  • 1
  • 9
  • 27
  • I don't have a straight solution, but I'm sure you can do it (the links below have some shapes that appear far more elaborate than the sail). If you analyze some of the codes from [this link](http://www.css3shapes.com/) and [this other link](http://css-tricks.com/examples/ShapesOfCSS/), you might be able to figure out how to do it. – Reed Apr 05 '12 at 09:06
  • Thanks for the links Jakar. The sail could be considered to be just part of the egg. – user114671 Apr 05 '12 at 09:15
  • Maybe you need to use html5 canvas elements. Or try http://raphaeljs.com/ as a JavaScript solution. – Alp Apr 05 '12 at 09:16

2 Answers2

3

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/

sandeep
  • 91,313
  • 23
  • 137
  • 155
  • Many thanks Sandeep, I think you have it. I've had a bit of a play and this is what I've now got... .sail{ width: 50px; height: 100px; position:relative; overflow:hidden; } .sail:after{ width:300px; height:300px; content:''; position:absolute; right:0; top:-40px; -moz-border-radius:150px; border-radius:150px; background: #ff0000; } which is pretty much exactly what I wanted. See here: http://jsfiddle.net/RuLxK/ – user114671 Apr 05 '12 at 09:27
0

We can use radial-gradient() to draw this shape:

div {
  background: radial-gradient(200px at -50px 100%, red 50%, transparent 50%);
}


div {
  background: radial-gradient(200px at -50px 100%, red 50%, transparent 50%);
  height: 100px;
  width: 50px;
}
<div>

</div>
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95