CODEWITHSUNDEEP
css
Jitendra Vyas
Jitendra Vyas

Reputation: 152667

How to create angle like this in CSS

...

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

I checked here http://www.css3.info/preview/rounded-border/ but all corners are in rounded shape.

Upvotes: 3

Views: 2083

Answers (3)

ACP
ACP

Reputation: 35268

Jquery Corner Plugin

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

Upvotes: 3

Delan Azabani
Delan Azabani

Reputation: 81384

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.

Upvotes: 1

bobince
bobince

Reputation: 536379

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.

Upvotes: 2

Related Questions