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

CSS corner block

CSS corner block

Problem

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:

Answer:

#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.

Solution

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;
}

The HTML:

Solution courtesy of: j08691

Discussion

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

×