How to make shapes with CSS which have borders?

Question

I am looking for a way to make various geometric shapes using only HTML/CSS. I found my answer here, however it doesn't allows me to give borders to my shape. For instance I can get an inverted isosceles triangle using

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

It gives me this output:

enter image description here

However, now i can't add borders to the triangle like this:

enter image description here

Is there a way i can achieve what i want? Also, is it possible to give effects to it properly (like shadow effects etc.)

Note: I have a limitation of only being able to use inline CSS

Here you go: jsfiddle.net/892wb Inline, would require multiple elements. And about the shadow, it won't work. — Tim
– Tim, Commented Dec 24, 2013 at 12:21
@Tim u have used pseudo class selectors which unfortunately i can't use inline :( — Surender Thakran
– Surender Thakran, Commented Dec 24, 2013 at 12:50
Excuse me for the tripple comment, but this one is with simulated shadow like Julio suggested: jsfiddle.net/892wb/4 — Tim
– Tim, Commented Dec 24, 2013 at 13:00

Slavenko Miljic · Accepted Answer · 2013-12-24 12:15:57Z

3

Well, It's kind of messy but if the triangle is not dynamic, this should work. The idea is to place another absolutely positioned triangle with appropriate size and borders under the existing one by using :before pseudo element.

Something like this http://jsfiddle.net/84zQL/

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

#triangle-down:before{
    content:"";
    position:absolute;
    top:-103px;
    left:-55px;
    width: 0;
    height: 0;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
    border-top: 110px solid blue;
    z-index:-1;
}

answered Dec 24, 2013 at 12:15

Slavenko Miljic

3,8562 gold badges25 silver badges37 bronze badges

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

1 Comment

nkmol Over a year ago

As a addition note. You can blur the triangle at the back to get a shadow alike effect. jsfiddle.net/84zQL/1

Eternal1 · Accepted Answer · 2013-12-24 12:09:44Z

1

davidwalsh.name/css-triangles

Very good article that answers exactly your question.

answered Dec 24, 2013 at 12:09

Eternal1

5,6253 gold badges34 silver badges48 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

Potential duplicate of this post. To achieve the border trick, you may need to align two triangles with different sizes i.e. an inner one with slightly smaller borders centered above the other.

The inline example using two triangles:

<div style="
    width: 0;
    height: 0;
    border-bottom: 110px solid blue;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;">
    <div style="
        width: 0;
        height: 0;
        position: absolute;
        top: 6px;
        left: 9px;
        border-bottom: 99px solid pink;
        border-left: 61px solid transparent;
        border-right: 61px solid transparent;">
     <div/>
<div/>

Demo: http://jsfiddle.net/haf9E/1/
If you want to make shadows, add overlaid triangles with different opacities or blurs, under or above depending on the type of shadows (inset or outset).

Gajanan · Accepted Answer · 2013-12-24 12:43:53Z

0

I tried some thing by adding an div outside the triangle .

.triangle {
width: 0px;

}

this post

answered Dec 24, 2013 at 12:43

Gajanan

1401 silver badge14 bronze badges

Collectives™ on Stack Overflow

How to make shapes with CSS which have borders?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related