Equilateral Triangle using SCSS

Simple Demo to create an Equilateral Triangle of Selective Size and Color

HTML

<div class="triangle">
</div>

SCSS

$triangle_size: 500px;
$triangle_color: tomato;

$triunit: $triangle_size / 2;
$transb: $triunit + ($triunit/4);

.triangle {
 width: 0; 
 height: 0; 
  border-left:  $transb solid transparent;
 border-right: $transb solid transparent;
 border-bottom: $triangle_size solid $triangle_color;
 
 
}
Try the example: http://codepen.io/grvpanchal/pen/yeMvWw

Comments

Popular posts from this blog

Switching from Notepad++ FTP to Visual Studio Code FTP

Simple PHP Script to read Tab Delimited File

jTable to edit and process MySQL table using CodeIgnitor : Part 2