Can I create a triangle with just using CSS?

Question

I have tried following css:

 .triangle:after {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    margin-top:1px;
    margin-left:2px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
}

.triangle:before {
    position:absolute;
    content:"";
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid black;
}

As i dont want to go with the SVG, is there any alternate way to achieve this.

I don't understand your question. Your CSS provides what you are asking for. Is there something wrong with it? If so what? — web-tiki, Dec 21 '15 at 13:33

score 1 · Accepted Answer · answered Dec 21 '15 at 13:34

You can use following css:

.triangle {
width: 0;
height: 0;
border-top: 100px solid #0099ff;
border-left: 100px dashed transparent;
border-right: 100px dashed transparent;
border-bottom: 0;
display: block;
overflow: hidden;
}

You can check this demo http://leplay.github.com/demo/triangle.html

Can I create a triangle with just using CSS?

1 Answers1