JSFiddle - React, Tailwind, and code Playground

by Softlink

HTML

<div class="block">Кнопка</div>

CSS

.block{
    margin: 50px;
  position: relative;
  display: inline-block;
  color: #fff;
  padding: 5px 12px;
  border-radius: 0 5px 5px 0;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.7);
  background: #05a335; /* Old browsers */
background: -moz-linear-gradient(top,  #05a335 0%, #0f9036 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05a335), color-stop(100%,#0f9036)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #05a335 0%,#0f9036 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #05a335 0%,#0f9036 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #05a335 0%,#0f9036 100%); /* IE10+ */
background: linear-gradient(top,  #05a335 0%,#0f9036 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05a335', endColorstr='#0f9036',GradientType=0 ); /* IE6-9 */
}

.block:before{
  content:'';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  width: 12px;
  background: #05a335; /* Old browsers */
background: -moz-linear-gradient(top,  #05a335 0%, #0f9036 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05a335), color-stop(100%,#0f9036)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #05a335 0%,#0f9036 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #05a335 0%,#0f9036 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #05a335 0%,#0f9036 100%); /* IE10+ */
background: linear-gradient(top,  #05a335 0%,#0f9036 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05a335', endColorstr='#0f9036',GradientType=0 ); /* IE6-9 */
z-index: 1;
}

.block:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 16px;
  border-radius: 5px 0 0 5px;
  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.7);
  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
 ...