How to create a corner like this in CSS

Question

...

alt text http://shup.com/Shup/329122/1104381445-My-Desktop.png

I checked here http://www.css3.info/preview/rounded-border/ , but all angles are rounded.

Answer 1

JQuery Corner Plugin

Corner is a simple plugin for creating rounded (or other style) corners on elements.

Answer 2

Yes, with CSS, only round / elliptical borders are available. If you need other shapes, you will need to use an image.

You can get straight diagonals by abusing boundary connections:

<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 if a particularly good idea.

Answer 3

bobince, , ? , :

element {
  background: gray url(cornerImage) no-repeat bottom right;
}

This is better than the jQuery plugin, since no scripts are needed (which should be avoided for presentation as much as possible). The corner image will be just a small square image with gray and white triangles.