JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="trapezoid_parent" style="width:300px; height:300px">
        <button class="left_button yellow"><i class='fa fa-arrow-left'></i></button>
        <button class="trapezoid top"><i class='fa fa-arrow-down'></i></button>
        <button class="trapezoid bottom"><i class='fa fa-arrow-down'></i></button>
        <button class="right_button green"><i class='fa fa-arrow-right'></i></button>
        <button class="center_button red">OK</button>
    </div>

CSS

button {
    font-size:17px;
    marging 0;
    padding:0;
    width: 9.05%; 
    height: 100%; 
    border: 0.5px solid #000000;
    position: relative;
}
.trapezoid_parent {
    position: relative;
}
.left_button {
    height: 100%; position: absolute; width: 40%; left:0; z-index: 1; border-right: 1px solid #000000;
}
.right_button {
    height: 100%; position: absolute; width: 40%; right:0; z-index: 1; border-left: 1px solid #000000;
}
.center_button {
    height: 100%; position: absolute; width: 100%; right:0; z-index: 0;
}
.trapezoid {
    position: absolute;
    border-bottom: 50px solid #f98d12;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    width: 100%; 
    height: 0; 
    z-index: 2;
}
.trapezoid.top {
    transform: rotate(180deg);
    top: 0;
    border-top: 1px solid #000000;
}
.trapezoid.bottom {
    bottom: 0;
    border-top: 1px solid #000000;
}

JavaScript

(function($,sr){

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) {
      var timeout;

      return function debounced () {
          var obj = this, args = arguments;
          function delayed () {
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          };

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      };
  }
  // smartresize 
  jQuery.fn[sr] = function(fn){  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };

})(jQuery,'smartresize');
(function($) {
    $.trapezoid = function(element, options) {

        var defaults = {
            square_size: 0.2,
        }

        var plugin = this;

        plugin.settings = {}

        var $element = $(element),
             element = element;

        var adjust_size = function() {
            var internal_square_size = ((1.0 / 2) - plugin.settings.square_size);

            var tpw = $element.width();
            var tph = $element.height();
           $(".trapezoid", $element)
                .css("border-left-width", "" + (tpw * internal_square_size) + "px")
                .css("border-right-width", "" + (tpw * internal_square_size) + "px")
                .css("border-bottom-width","" + (tph * internal_square_size) + "px");

            $(".left_button, .right_button", $element).css("width", "" + internal_square_size*100 + "%");
            console.log("tpw: "+tpw+";tpw*0.4 = " +(tpw * internal_square_size));
        }

        plugin.init = function() {
            plugin.settings = $.extend({}, defaults, options);
            adjust_size();
            var that = this;
            $(window).smartresize(function(){
              adjust_size();
            });
        }

   ...