Triangoli in CSS

Come costruire dei triangoli in CSS

by Marco Ballarini

HTML

<div style="padding:5px;float:left;" >
  <div id="triangle-up"></div>
</div>
<div style="padding:5px;float:left;" >
  <div id="triangle-down"></div>
</div>
<div style="padding:5px;float:left;" >
  <div id="triangle-right"></div>
</div>
<div style="padding:5px;float:left;" >
  <div id="triangle-left"></div>
</div>
<div style="padding:5px;float:left;" >
  <div id="triangle-topleft"></div>
</div>
<div style="padding:5px;float:left;" >
  <div id="triangle-topright"></div>
</div>
<div style="padding:5px;float:left;" >
  <div id="triangle-bottomleft"></div>
</div>
<div style="padding:5px;float:left;" >
  <div id="triangle-bottomright"></div>
</div>

CSS

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #0060A0;
}
#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid #0060A0;
}
#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid #0060A0;
    border-bottom: 50px solid transparent;
}
#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid #0060A0;
    border-bottom: 50px solid transparent;
}
#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid #0060A0;
    border-right: 100px solid transparent;
}
#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid #0060A0;
    border-left: 100px solid transparent;
}
#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid #0060A0;
    border-right: 100px solid transparent;
}
#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid #0060A0;
    border-left: 100px solid transparent;
}