Triangle / Arrow Mixin in LESS

Tutorials of (Triangle / arrow mixin in less) by Eky

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Triangle / Arrow Mixin in LESS</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  padding-top: 20px;
  text-align: center;
  background: #111;
  color: #ddd;
}
.triangle {
  display: inline-block;
}
.triangle.top {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 0 25px 50px 25px;
  border-bottom-color: red;
  border-left-color: rgba(255, 0, 0, 0);
  border-right-color: rgba(255, 0, 0, 0);
}
.triangle.bottom {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 50px 25px 0 25px;
  border-top-color: orange;
  border-left-color: rgba(255, 165, 0, 0);
  border-right-color: rgba(255, 165, 0, 0);
}
.triangle.right {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-left-color: yellow;
  border-top-color: rgba(255, 255, 0, 0);
  border-bottom-color: rgba(255, 255, 0, 0);
}
.triangle.left {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 25px 50px 25px 0;
  border-right-color: green;
  border-top-color: rgba(0, 128, 0, 0);
  border-bottom-color: rgba(0, 128, 0, 0);
}
.triangle.top-right {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-right-color: cyan;
  border-bottom-color: rgba(0, 255, 255, 0);
}
.triangle.top-left {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-top-color: blue;
  border-right-color: rgba(0, 0, 255, 0);
}
.triangle.bottom-right {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-bottom-color: indigo;
  border-left-color: rgba(75, 0, 130, 0);
}
.triangle.bottom-left {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 50px 0 0 50px;
  border-left-color: purple;
  border-top-color: rgba(128, 0, 128, 0);
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <h1>Triangle / Arrow Mixin in LESS</h1>
<div class='triangle top'></div>
<div class='triangle bottom'></div>
<div class='triangle right'></div>
<div class='triangle left'></div>
<div class='triangle top-right'></div>
<div class='triangle top-left'></div>
<div class='triangle bottom-right'></div>
<div class='triangle bottom-left'></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  padding-top: 20px;
  text-align: center;
  background: #111;
  color: #ddd;
}
.triangle {
  display: inline-block;
}
.triangle.top {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 0 25px 50px 25px;
  border-bottom-color: red;
  border-left-color: rgba(255, 0, 0, 0);
  border-right-color: rgba(255, 0, 0, 0);
}
.triangle.bottom {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 50px 25px 0 25px;
  border-top-color: orange;
  border-left-color: rgba(255, 165, 0, 0);
  border-right-color: rgba(255, 165, 0, 0);
}
.triangle.right {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-left-color: yellow;
  border-top-color: rgba(255, 255, 0, 0);
  border-bottom-color: rgba(255, 255, 0, 0);
}
.triangle.left {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 25px 50px 25px 0;
  border-right-color: green;
  border-top-color: rgba(0, 128, 0, 0);
  border-bottom-color: rgba(0, 128, 0, 0);
}
.triangle.top-right {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 0 50px 50px 0;
  border-right-color: cyan;
  border-bottom-color: rgba(0, 255, 255, 0);
}
.triangle.top-left {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-top-color: blue;
  border-right-color: rgba(0, 0, 255, 0);
}
.triangle.bottom-right {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-bottom-color: indigo;
  border-left-color: rgba(75, 0, 130, 0);
}
.triangle.bottom-left {
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 50px 0 0 50px;
  border-left-color: purple;
  border-top-color: rgba(128, 0, 128, 0);
}
/* Downloaded from https://www.codeseek.co/ */
/*
  .top          { .triangle(top, @width, @height, @color) }
	.bottom       { .triangle(bottom, @width, @height, @color) }
	.right        { .triangle(right, @width, @height, @color) }
	.left         { .triangle(left, @width, @height, @color) }
	.top-right    { .triangle(top-right, @width, @height, @color) }
	.top-left     { .triangle(top-left, @width, @height, @color) }
	.bottom-right { .triangle(bottom-right, @width, @height, @color) }
	.bottom-left  { .triangle(bottom-left, @width, @height, @color) }
*/

This awesome code ( Triangle / Arrow Mixin in LESS ) is write by Eky, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Eky