JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css">
<div id="curves" class="width">
    <div id="curve1"></div><span class="arrow-right"></span>
</div>

CSS

#curves div {
    width: 100px;
    height: 100px;
    border: 5px solid #999;
}

#curves.width div {
    border-color: transparent transparent transparent #999;
}



#curve1 {
    -moz-border-radius: 50px 0 0 50px;
    border-radius: 50px 0 0 50px;
}
.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 27px solid #ccc;
  float: right;
  margin-top: -7px;
  margin-right: -26px;
}

JavaScript

$('#curves').click(function(){
    $(this).toggleClass('color width');
});

var custom = $('#custom');

$('#controls div').slider({
    min: 0, 
    max: 300, 
    slide: function(evt, ui){
        var radius = $('#top').slider('value') + 'px 0 0 ' + $('#bottom').slider('value') + 'px';
        custom.css({
            width: $('#width').slider('value'), 
            height: $('#height').slider('value'), 
            borderRadius: radius, 
            MozBorderRadius: radius, 
            WebkitBorderRadius: radius
        });
        
        $(this).prev().text(ui.value + 'px');
    }
});

$('#width, #height').slider('option', 'value', 100);

$('#all').change(function(){
    $('#curves').toggleClass('all');
});