CODEWITHSUNDEEP
htmlcss
Surender Thakran
Surender Thakran

Reputation: 4054

How to make shapes with CSS which have borders?

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

Upvotes: 1

Views: 521

Answers (4)

Gajanan
Gajanan

Reputation: 140

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

.triangle {
width: 0px;

}

this post

Upvotes: 0

Julio
Julio

Reputation: 401

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

Upvotes: 1

Slavenko Miljic
Slavenko Miljic

Reputation: 3856

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

Upvotes: 3

Eternal1
Eternal1

Reputation: 5625

davidwalsh.name/css-triangles

Very good article that answers exactly your question.

Upvotes: 1

Related Questions