i am trying to create the following image using css.... so far i've got this after googling a bit http://jsfiddle.net/w9Zgc/ and i want to make the following shape..
is there any way this can be done... any help would be appreciated.. oh and i would like the shadow to be like the one here... http://jsfiddle.net/w9Zgc/
So I managed to create an icon that renders more or less the same in all current browsers. I had to use an extra useless span, unfortunately.
http://codepen.io/myajouri/full/nJDzl
The triangle is made of two parts:
the upper (triangular) part is a transformed (skewed and rotated) square with rounded corners.
the bottom of the triangle is the bottom part of a rectangle with rounded corners.
Both parts are cut and joint at certain places to form the triangular shape with rounded corners and shadows.
Related
In the Spark BorderContainer component the border sides and corner radius styles were not copied over from the halo component set (see here).
Specifically:
borderSides (left, top, bottom, right)
cornerRadius(TL/TR/BL/BR)
borderThickness(Left/Right/Top/Bottom) * optional
backgroundAttachment (fixed, scroll) * optional
I've been trying to add them manually but I'm having some difficulty.
I've brought over some code from the HaloBorder.as skin and it is sortof working except it is appearing behind the background fill.
It's a lot of code so I pasted it here.
BTW That code was my first approach. But it looks like I could use the insetPath that is already there to draw border. That would be better since it allows me to set all the stroke properties but I don't know how to write path data so I'd have to learn that as well. But at this point I'd be happy to get anything working.
Update:
I found a class that has some methods for generating curved border path data. Look in spark/skins/spark/TabBarButtonSkin.mxml. You can see the code here, in the createPathData() method.
I am trying to create HTML Table and give some cells a special border,
you can see the example here - I marked it with Arrow..
Please help me to understand how can I create such border , without using images.
I read this topic, but I could not be able to transfer it to table element or do it as the border of it..
Customizing border properties using zigzag edges
Thanks,
Gabi.
The answer is to use an image as a background to the cell. The image contains the curve and the image could be white and grey, or transparent and grey depending on your use case.
Always try to see what could be there instead of what you think is there
What is the HTML CSS solution for highlighting specific areas of a map/floor plan like this?
http://www.centrecourtshopping.co.uk/store-info/
They use sprite image look here.
Basically, it works like that:
The map with dark-blue regions is completely static.
There is invisible layer on top of it made from small rectangular in their case <a> -- each corresponds to single dark-blue region and posses its its own id.
When cursor is placed over a rectangular with id x the sprite image is nicely aligned with its background (by setting CSS's background-position).
Do not think, this magic would be possible without using JavaScript.
I have a collapsing tab with Css Icon fonts, i want to keep the same distance between the Title and the Icon font arrow.
Here the example
http://jsfiddle.net/2D3V5/2/
If the Text on the left has the same length, the Icon font arrow keep the same distance and it's ok, but this is not going to happen in my tabs because obviously the texts are gonna be different, so i need to find out how to keep the Arrow Icon at the same distance from the text independently from the length of the text.
Hope the explanation is clear.
Thanks
You can float the images to right. That's a simple way to manage the equal distance.
Plus, the images of the rest of division are inverted. Do change their classes.
Here is the edited fiddle : Fiddle
See http://jsfiddle.net/2D3V5/3/
If you want to keep the Arrow Icon at the same distance from the text, but you want the arrows aligned too, you have to place the arrows at the left of your titles.
how can i create a ribbon like this that sits on corner of my boxes and it is rotated too with css and without images.
i know that exits some tools and tutorials like this and this that makes ribbons easily with css.
but all of those are horizontal type while i want to create a rotated one.
Once you follow those tutorials to create a horizontal ribbon, use CSS3 Transform (Rotation) to rotate the ribbon: http://davidwalsh.name/css-transform-rotate
http://jsfiddle.net/R6jMH/ Have a look