Search code examples
javascriptjqueryhtmlcsspascals-triangle

How can i Resize Triangle shape using Jquery

i want to resize triangle using jQuery.I know about jQuery resizable function but in triangle shape how can i resize it. Here is code for triangle i want to resize it using mouse

.triangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px;
  border-color: transparent transparent #007bff transparent;
}
<div class="triangle"></div>

Solution

  • Using jQuery, you could simply use a <input type="range"/> slider to update the value of the property that is driving the triangle. In your case, this is border-width. 

    $(function() {

  var triangle = $('.triangle');
  var slider = $('#triangle-control');

  slider.on('change', function(e) {

    triangle.css({
      'border-width': this.value + 'px'
    })

  })


});
    .triangle {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 20px;
  border-color: transparent transparent #007bff transparent;
  transition: border-width 500ms ease-in;
}
    <!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
   
    
    <input id="triangle-control" type="range" min="20" max="100"/>
    
     <div class="triangle"></div>
  </body>

</html>