CSS corner block

Question

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: enter image description here

Answer:

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

Have you tried something so far? Did you encounter some specific problems with your code? Even if it didn't work, it's OK. We all make mistakes. Just show us your progress so that we could have a common base for discussion. Right now all we have is a quadrilateral triangle ASCII art which of course is kinda a cool but not really programming related discussion sparking. — Darin Dimitrov
– Darin Dimitrov, Commented Jan 29, 2012 at 20:16
No, we can't help you, because we can't really tell what a "corner block" is. That's a triangle. — BoltClock
– BoltClock, Commented Jan 29, 2012 at 20:16
I have no idea what you're asking us to do. Or what you'd like our answers to work with. Is this dependent on a specific type of mark-up? If so, what's the mark-up? What have you tried in order to help yourself? — David Thomas
– David Thomas, Commented Jan 29, 2012 at 20:23
@KirillA., we don't really care about your English. We care about the fact the you didn't show any effort (source code) from your part in order to solve your problem. You just described your problem/request the way you would do to a developer that you are paying money in order to perform some specific task. That's not what Stack Overflow is intended for. If you need to hire a developer there are other sites. Here you ask a question and show what have you tried so far in order to solve your problem. — Darin Dimitrov
– Darin Dimitrov, Commented Jan 29, 2012 at 20:24

j08691 · Accepted Answer · 2012-01-29 20:50:06Z

2

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:

<div class="triangle"></div>

answered Jan 29, 2012 at 20:50

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS corner block

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related