How to make shapes with CSS which have borders?


Tags: html,css,css3

Problem :

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



Solution :

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

    CSS Howto..

    How to Make Button Tag Only Show Image Inside of it

    CSS - How can I make a font readable over any color?

    How do I add a the bootstrap 'form-control' class to a select using the Simple_Form gem?

    How to convert table with merged cells to responsive design?

    How to display a button over a picture only when hovering it?

    How to arrange three flex div side by side

    How to force elements to be in middle?

    How to create CSS file within PHP code [closed]

    How can I create CSS styles dynamically?

    How to rotate background in CSS?

    How can you configure Rails to use blueprint-css instead of the default scaffolding css?

    HTML+CSS: How to force div contents to stay in one line?

    How do I apply odd/even styles to elements while taking into account excluded classes? [duplicate]

    how to display tabs in more than one row having the extra tabs coming one row up rather than one row below?

    How to match baseline in two floating divs

    How to make float navbars with JS and CSS?

    How to turn on Visual Studio 2010 .css Intellisense on .less file

    How do you make a CSS menu for mobile devices that stays the same size regardless of page zoom?

    How to apply a CSS style to div AND the div nested in the div [duplicate]

    bootstrap navbar how to give it a max width

    how to use jquery closest function

    How do I line up my textboxes without using a table? html/css

    How to make text on the same line different font without using extra divs?

    jquery/css how to rescale and crop a large image to fit my display div?

    How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

    How to remove the circle in the background of the impress.js demo

    How to give effect on dragging in css or through jquery

    How to make an image always load in the center of page?

    How to remove the effect of all the parent containers on any child control

    How would I do a two finger drag with javascript/jquery?