css-shapes

I can turn a div into a circle like this: .circle { background-color: rgba(0, 0139, 0139, 0.5); height: 200px; width: 200px; -moz-border-radius:50%; -webkit-border-radius: 50%; border-radius:50%; } <div class="circle"></div> </div> But i have to specify width height: I want to display three rows of text in DIV's with "no-wrap" so each of the 3 segments of text have there own line and are not wrapped. I want to display these in the center of a circle and have the circle expand to fit the lines of text. The text lines will be pulled from a database via PHP, and will vary in character length. The

This question already has an answer here: How do CSS triangles work? 18 answers Creating a transparent arrow above image in CSS3 2 answers Respected stackoverflowers, How do i create a triangle element with the background pattern? For example i need the div like this : But my state is like this : All examples with triangle elements use borders which cant have an img in that .... This is my subsection class which needs the coolarrow: <div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div> .subsection { .box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3)); background: url('/assets

I'm currently in the process of learning all about css, so I'm trying to generate different shapes with different functionalities. I am currently working on a project which requires a horizontal arrow to display the 'progress' of a transaction occurring. So i'm trying to generate an arrow 'progress bar' like: |\ | \ +----------------+ \ |XX| 10% > +----------------+ / \ | / \ |/ \the XX's depict a different color. I currently Am able to 'fill' up until the arrow head, but the way I've generated the arrow head,I can't seem to 'fill' it in line as well (i.e. at ~90%, half of the physical head

I know it is possible to draw and animate arcs in svg and canvas. However, is it possible in css? I have created an arc using the following method: .arc{ width:150px; height:400px; border-radius:50%; border-right:1px solid black; border-left:1px solid black; border-top:1px solid black; border-bottom:1px solid white; } Original Fiddle: http://jsfiddle.net/YGKWT/ (Broken link) But, how can I animate this? The only way I can think of is having a pure white div over it and sliding that div to the right gradually revealing the arc. Is there a better way? Edit: Here is the type of animation I am

I want to make the following design: I tried with :after and :before but it does not work. Here’s my current code: .design { background: #ea053a; display: inline-block; height: 155px; margin-left: 33px; margin-right: 40px; position: relative; width: 228px; } .design:before { border-top: 43px solid #ea053a; border-left: 50px solid transparent; border-right: 50px solid transparent; margin-right: 40px; content: ""; height: 0; left: 0; position: absolute; top: 55px; margin-top: 100px; width: 128px; } <div class="design"></div> ( fiddle ) How could I leave it the same as the original design and