How to create angle like this in CSS
...
alt text http://shup.com/Shup/329122/1104381445-My-Desktop.png
I check开发者_如何学Ced here http://www.css3.info/preview/rounded-border/ but all corners are in rounded shape.
Jquery Corner Plugin
Corner is a simple plugin for creating rounded (or other styled) corners on elements.
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.
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.
精彩评论