CSS: explain how to draw css triangle

Question

I'm reading on this shape of CSS. Here is the code of drawing triangle:

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

I don't know the logic behind. And I don't know how to add a border to this triangle.

http://codepen.io/chriscoyier/pen/lotjh – max May 15 '17 at 16:30 — max, May 15 '17 at 16:30

score 2 · Accepted Answer · edited May 15 '17 at 22:36

Yes, it is tricky. CSS triangles are achieved using a combination of a colored & transparent border of an element.

Credit for this demo goes to Chris Coyier

(function(){var demo,run;demo=$("#whole-thing");run=function(){setTimeout(function(){return demo.addClass("step-1");},2500);setTimeout(function(){return demo.addClass("step-2");},5000);setTimeout(function(){return demo.addClass("step-3");},5500);setTimeout(function(){return demo.addClass("step-4");},6000);setTimeout(function(){return demo.addClass("step-5");},7500);setTimeout(function(){return demo.addClass("step-6");},10000);setTimeout(function(){return demo.addClass("step-7");},12000);setTimeout(function(){return demo.addClass("step-8");},14000);setTimeout(function(){return demo.addClass("step-9");},14500);setTimeout(function(){return demo.addClass("step-10");},15000);return setTimeout(function(){return demo.addClass("step-11");},18000);};run();$("#re-run").on('click',function(){$("#whole-thing").removeClass();return run();});}).call(this);

@import url(http://fonts.googleapis.com/css?family=Andika);.triangle-demo {  width: 100px;  height: 100px;  margin: 0 auto;  background: tan;  border-top: 0 solid #EE7C31;  border-left: 0 solid #F5D97B;  border-bottom: 0 solid #D94948;  border-right: 0 solid #8DB434;  transition: 0.8s 0.2s;}.step-1 .triangle-demo {  border-top-width: 10px;}.step-2 .triangle-demo {  border-left-width: 10px;}.step-3 .triangle-demo {  border-right-width: 10px;}.step-4 .triangle-demo {  border-bottom-width: 10px;}.step-6 .triangle-demo {  background: transparent;}.step-7 .triangle-demo {  width: 0;  height: 0;}.step-8 .triangle-demo {  border-left-color: transparent;}.step-9 .triangle-demo {  border-right-color: transparent;}.step-10 .triangle-demo {  border-top-color: transparent;}.triangle-title {  width: 300px;  padding: 1rem;  color: white;  background: #D94948;  border-radius: 20px;  margin: auto;  opacity: 0;  transition: 0.8s 0.2s;}.step-11 .triangle-title {  opacity: 1;}body {  background: #333;  font-family: 'Andika', sans-serif;  color: white;  text-align: center;  font-size: large;  transform: translateZ(0);}.steps {  position: relative;  height: 45px;}.steps > div {  position: absolute;  top: 0;  left: 0;  width: 100%;  opacity: 0;  background: #333;  transition: 0.3s;}.steps .step-0 {  opacity: 1;}.step-1 .steps .step-1 {  opacity: 1;}.step-2 .steps .step-2 {  opacity: 1;}.step-5 .steps .step-5 {  opacity: 1;}.step-6 .steps .step-6 {  opacity: 1;}.step-7 .steps .step-7 {  opacity: 1;}.step-8 .steps .step-8 {  opacity: 1;}.step-11 .steps .step-11 {  opacity: 1;}h1 {  text-transform: uppercase;  letter-spacing: 1px;  font-size: 1.5rem;  border-bottom: 1px solid #555;  color: #999;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h1>How a CSS Triangle is Made</h1><div id="whole-thing">  <div class="steps">    <div class="step-0">Imagine a box.</div>    <div class="step-1">The box has a border-top.</div>    <div class="step-2">It also has the other borders.</div>    <div class="step-5">Notice how the borders meet each other at angles.</div>    <div class="step-6">The background of the box is transparent.</div>    <div class="step-7">The box is actually zero width and zero height.</div>    <div class="step-8">Three of the borders are actually transparent in color.</div>    <div class="step-11">That's how a CSS triangle is made!</div>  </div>  <div class="triangle-demo"></div>  <div class="triangle-title">    <button id="re-run">Run Again</button></div></div>

That *is* an awesome explanation! +1 – gaynorvader May 15 '17 at 16:39 — gaynorvader, May 15 '17 at 16:39

score 1 · Answer 2 · answered May 15 '17 at 16:38

You can't add a border to a css triangle the way you're thinking because a css triangle is a strangely drawn border. If you want to have a border, the best way to do it is to have a larger triangle behind your smaller triangle. So something like this: https://jsfiddle.net/9cL8g6pu/2/

#wrapper{
  position: relative;
  width: 105px;
  height: 105px;
}
#tri-up {
  position: absolute;
  top: 3px; left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
#t-up-bg{
  position: absolute;
  top: 0; left: 0;
  width: 0;
    height: 0;
    border-left: 53px solid transparent;
    border-right: 53px solid transparent;
    border-bottom: 105px solid blue;    
}

CSS: explain how to draw css triangle

2 Answers2