...
I checked here http://www.css3.info/preview/rounded-border/ but all corners are in rounded shape.
so it's not possible using css3only
metal-gear-solid
2010-05-03 07:26:50
@metal-gear-solid sorry man i really didn't checkout the tags... I thought you were searching for a jquery plugin..
Pandiya Chendur
2010-05-03 07:30:51
it's not possible in in css3 so i will go for this jquery plugin
metal-gear-solid
2010-05-03 07:50:53
I tested this it adds so many div tag to make angle.
metal-gear-solid
2010-05-05 03:41:01
see this screen - http://shup.com/Shup/332387/11046214422-My-Desktop.png
metal-gear-solid
2010-05-06 16:16:52
@metal which one of these angles you are using ......
Pandiya Chendur
2010-05-07 03:53:47
@Pandiya Chendur - I'm using this code `$("#item3 li:last").corner("br bevel");`
metal-gear-solid
2010-05-07 04:23:11
@metal it looks fine to me... Post a picture of this as what you get?
Pandiya Chendur
2010-05-07 04:31:25
@metal i found a way... Your back ground color seems to be in red right!..... If so go to corner.js and find `#ffffff` and replace it with your red color code...
Pandiya Chendur
2010-05-07 04:33:59
@metal i posted answer to your question...
Pandiya Chendur
2010-05-07 04:39:06
+1
A:
Yes, only round/elliptical borders are available through CSS. If you want other shapes you will have to use an image.
It's possible to get straight diagonals by abusing border joins:
<div style="background: gray; height: 100px; width: 200px; position: relative;">
<div style="height: 1px; width: 1px; border-top: solid gray 20px; border-right: solid white 20px; position: absolute; bottom: -1px; right: 0;"></div>
</div>
Not sure that's an especially good idea though.
bobince
2010-05-03 07:30:30
This idea is good I have to make this for `<li><a href="#> some text </a> </li>`. Is it possible to apply css only to <li> or <a>. using this type of technique http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/. Actually i have to make dropdown like this http://stackoverflow.com/questions/2767150/how-to-make-this-type-transparent-dropdown-with-flat-angle-keeping-markup-semanti
metal-gear-solid
2010-05-05 03:46:50
A:
Improving on bobince's idea, which uses two elements, have you tried using backgrounds? They allow you to stick a normal coloured background plus the moving custom background stuck to the bottom:
element {
background: gray url(cornerImage) no-repeat bottom right;
}
This is superior to a jQuery plugin as no scripting is needed (which should be avoided for presentation as much as possible). The corner image will just be a small square image that has grey and white triangles.
Delan Azabani
2010-05-03 08:49:43