title: Trouble painting different-shaped divs
body: <p>I'm having real trouble painting div's with different shapes. Example is <a href="http://shrt.edu.pl/beta/teeth/asd/i4.php" rel="nofollow">here</a>. All is in html/css/js so there will be no issue viewing it's source. Are there any attributes to css to make it work properly? All I have to do it all the way around?</p>
  
  <p>Issue - div doesn't always change color when clicking it in different parts of it.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var colors = ["white","red","blue","green","yellow","purple"];
  var names = ["none","próchnica","odbarwienie","coś1","coś2","coś3"];
  var index = 0;
  function button_click() {
     index = (index + 1) % colors.length;
     document.getElementById("box").style.backgroundColor = colors[index];
     document.getElementById("boxname").innerHTML = "&amp;nbsp;"+names[index];
  }
  function paint(color,id,type) {
   var currentID = id;
   if (type=="trapez") {
    document.getElementById(currentID).style.borderBottomColor = color;
   } else if (type=="triangle_left") {
    document.getElementById(currentID).style.borderRightColor = color;
   } else if (type=="triangle_right") {
    document.getElementById(currentID).style.borderLeftColor = color;
   }
    
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div#box
  {
      width:20px;
      height:20px;
      background-color: white;
      border-color: black;
      border-style: solid;
      border-width: 1px 1px 1px 1px;
      float: left;
  }
  .t1
  {
   width:50px;
   height:50px;
   background-color: white;
   border-color: black;
   border-style: solid;
   border-width: 1px 1px 1px 1px;
   float: right;
  }
  
  .line{
  
   height:200px;
  }
  .container{
   float:left;
   margin-left:10px;
   
  }
  .triangle-left {
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-right: 50px solid blue;
   border-bottom: 50px solid transparent;
   position:absolute;
   margin-left:110px;
  }
  
  .triangle-right {
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-left: 50px solid green;
   border-bottom: 50px solid transparent;
   position:absolute;
  
  }
  
  .trapezoid {
   border-bottom: 50px solid red;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   height: 0;
   width: 60px;
  }
  
  .trapezoid-rotated {
   border-bottom: 50px solid gray;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   height: 0;
   width: 60px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="box" onclick="button_click();"&gt;&lt;/div&gt;&lt;div id="boxname"&gt;&amp;nbsp;none&lt;/div&gt;
  
   &lt;div class='line'&gt;
    &lt;div class='container'&gt;
     &lt;div id='a-1' class='triangle-left' onclick="paint(colors[index],this.id,'triangle_left');"&gt;
      
     &lt;/div&gt;
     &lt;div id='b-1' class='triangle-right' onclick="paint(colors[index],this.id,'triangle_right');"&gt;
      
     &lt;/div&gt;
     &lt;div id='center'&gt;
      &lt;div id='c-1' class='trapezoid-rotated' onclick="paint(colors[index],this.id,'trapez');"&gt;
       
      &lt;/div&gt;
      &lt;div id='d-1' class='trapezoid' onclick="paint(colors[index],this.id,'trapez');"&gt;
       
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  
   &lt;div class='line'&gt;
    &lt;div class='container'&gt;
     &lt;div id='a-2' class='triangle-left' onclick="paint(colors[index],this.id,'triangle_left');"&gt;
      
     &lt;/div&gt;
     &lt;div id='b-2' class='triangle-right' onclick="paint(colors[index],this.id,'triangle_right');"&gt;
      
     &lt;/div&gt;
     &lt;div id='center'&gt;
      &lt;div id='c-2' class='trapezoid-rotated' onclick="paint(colors[index],this.id,'trapez');"&gt;
       
      &lt;/div&gt;
      &lt;div id='d-2' class='trapezoid' onclick="paint(colors[index],this.id,'trapez');"&gt;
       
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>