Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS corner block

CSS corner block


I need to create a corner block with CSS & html5.

Can somebody help me? Thanks.

update: first of all, it should be div. I have image on my site, this is screen:


#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
Problem courtesy of: Kirill A.


Are you looking to make a triangular div show up under your rectangular div? If so see this jsFiddle.

The CSS:

.triangle {
        width: 0;
        height: 0;
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 40px solid #999;


Solution courtesy of: j08691


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS corner block


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription