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: http://jsfiddle.net/892wb/ Inline, would require multiple elements. And about the shadow, it won't work. — Tim, Dec 24 '13 at 12:21
@Tim u have used pseudo class selectors which unfortunately i can't use inline :( — Surender Thakran, Dec 24 '13 at 12:50
Here the example using inline CSS: http://jsfiddle.net/892wb/1/ — Tim, Dec 24 '13 at 12:53
Excuse me for the tripple comment, but this one is with simulated shadow like Julio suggested: http://jsfiddle.net/892wb/4/ — Tim, Dec 24 '13 at 13:00

score 3 · Accepted Answer · answered Dec 24 '13 at 12:15

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

As a addition note. You can blur the triangle at the back to get a shadow alike effect. http://jsfiddle.net/84zQL/1/ — nkmol, Dec 24 '13 at 12:43

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

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

score 1 · Answer 3 · answered Dec 24 '13 at 12:09

1

davidwalsh.name/css-triangles

Very good article that answers exactly your question.

answered Dec 24 '13 at 12:09

Eternal1

5,447
3
30
45

score 0 · Answer 4 · answered Dec 24 '13 at 12:43

0

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

.triangle {
width: 0px;

}

this post

answered Dec 24 '13 at 12:43

Gajanan

140
1
14

How to make shapes with CSS which have borders?

4 Answers4