javascript - how to resize an arrow(div) in jquery ui -

javascript - how to resize an arrow(div) in jquery ui -

i want know how resize arrow in jquery ui.

the fiddle link is

http://jsfiddle.net/tr2fh/

the below code:

html <div class="connector_box"> </div> css .connector_box { margin: 15px auto 10px; height: 7px; background: #0076bd; width: 60px; } .connector_box:after { content: ""; border-top: 10px solid rgba(0, 0, 0, 0); border-bottom: 10px solid rgba(0, 0, 0, 0); border-left: 10px solid #0076bd; float: right; margin-top: -7px; margin-right: -5px; } jquery $(document).ready(function(){ $( ".connector_box" ).resizable(); }) script tags <script type="text/javascript" src="http//code.jquery.com/jquery-1.10.1.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.1/themes/smoothness/jquery-ui.css">

i know possible resize arrow using image. requirement has arised have using divs or spans.

any help appreciated.

javascript jquery css3 jquery-ui