css-shapes

I found this solution: Outline effect to text Which is great, but is it posible to make the text transparent and only the outline to draw? This happens with box-shadow, for example, as even if the box doesn't have a background, you won't see the shadow "under" the box. But with text, if it is transparent, you se the whole shadow of the type. Is it posible to get only the outline with transparent text? EDIT: The problem with this is to have a nice fallback for browsers that don't support for example -webkit-text-outline, because they wouldn't draw the outline and they would make the text

I am trying to make the below shape using only CSS. I know that achieving this shape using an image or SVG would be a lot easier but I am trying to achieve it with CSS for a proof of concept. The below is the code that I have tried so far. It creates a diamond shape by using transform: rotate(45deg) but the diagonals are of the same length whereas the shape that I need has one very long diagonal and another very short. .separator{ background: #555; top: 40px; padding-top: 0px; margin: 0px 40px; height: 100px; width: 100px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);

I have trying to create a 3D sphere using just pure css, but I've been unable to generate the shape required. I've seen a cylinder but I can't find any reference to creating an actual sphere . My current code looks like: .red { background-color: red; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } .sphere { height: 200px; width: 200px; border-radius: 50%; text-align: center; vertical-align: middle; font-size: 500%; position: relative; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; display:

I want to make a circular sector using CSS. The sectors will form a complete circle. How can I make it using CSS? I found a sample , but it makes a quarter circular sector. I want to make six circular sectors that make a complete circle. How can I make it? Note: I am not good at drawing, but here's a sample of what I want... div { width: 50px; height: 50px; background-color: #ccc; background-color: #ccc; -moz-border-radius: 100px; border-radius: 100px; } #center { position: relative; margin: 100px 0 0 100px; border: solid #fff 1px; } #tl,#tr,#bl,#br { position: absolute; height: 75px; width:

I have a simple div on a page: <div>Some Text</div> Is it possible, with CSS, to make it finish as an arrow. Something like: UPDATE This is the result I see with web-tiki proposed solution: See the cuts on the arrow? Thank You, Miguel EDIT : If you need the arrow to adapt to the height of the text (considering it can display on several lines) You can use linear-gradient background for the arrow. FIDDLE This can make it : FIDDLE CSS : div{ height:40px; background:red; color:#fff; position:relative; width:200px; text-align:center; line-height:40px; } div:after{ content:""; position:absolute;

So I've found this answer - CSS3 menu shape, style but have no idea on how to put it on the left side. I've searched for it already but with no luck. This is what I'm trying to achieve: And I've found this one also - Change the shape of the triangle . How can I make it work on the opposite side? I mean the arrow needs to be on the left side. And is it possible to do this with one div ? Roko C. Buljan Want one that you can put over any background color? jsBin demo Only this HTML: <span class="pricetag"></span> And this CSS: .pricetag{ white-space:nowrap; position:relative; margin:0 5px 0 10px;