Align text inside a div that is a semi-circle

Question

I have this code of my div. I want to alight some text inside. The text has to be aligned to the left curv of the div. How can this be possible? Thank you!

Here is the code of the div:

#cv {

position: absolute;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;  
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;

padding: 10px;


}

Answer 1

I believe you want the text to follow the semi circle, and not just have an ordinary align left along a straight edge. This is not (yet) possible with a simple css property. There are some hacky techniques like this however: http://www.torylawson.com/mw_index.php?title=CSS_-_Wrapping_text_around_non-rectangular_shapes

There are even a tools to help you, like this one: http://www.csstextwrap.com/

Adobe is pushing a new css property to wrap text: http://www.adobe.com/devnet/html5/articles/css3-regions.html

It should be already available in Chrome Canary, but I suppose that is of little use for you today. I think you will have to do with a hack today...

Answer 2

Working example: http://jsfiddle.net/mQFK6/4/

You want to add a <p> to hold the text, and then move it down 50% to the middle of the circle, and float it left

#cv {

position: relative;
top: 10%;
left: 30%;
width: 300px;
height: 600px;
background-color: #ffffff;  
border: 1px solid #ff0000;
border-radius:300px 0px 0px 300px;
padding: 10px;


}

p{
    top: 50%;
    position: relative;
    float: left;
    margin-left: 5px;
}