JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
      <div class="inner">
         <span>раз</span>
         <span>два</span>
         <span>три</span>
         <span>четыре</span>
         <span>пять</span>
      </div>
    </div>

CSS

.wrap{
    position: relative;
    display: inline-block;
     background-color: #555555;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#3b3b3b)); /* Chrome, Safari 4+ */
  background-image: -webkit-linear-gradient(top, #555555, #3b3b3b); /* Chrome 10-25, iOS 5+, Safari 5.1+ */
  background-image:    -moz-linear-gradient(top, #555555, #3b3b3b); /* Firefox 3.6-15 */
  background-image:      -o-linear-gradient(top, #555555, #3b3b3b); /* Opera 11.10-12.00 */
  background-image:         linear-gradient(to bottom, #555555, #3b3b3b); /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
    padding: 1px 2px;
}

.wrap:after{
    content:'';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -23px;
    width: 26px;
 background:  url(http://habrastorage.org/storage2/cb6/d8d/3e0/cb6d8d3e0b59f85787ec68c77b2e7fd4.png) no-repeat -190px -16px;
}
.inner{
    border: 1px dashed #888;
    border: 1px dashed rgba(255,255,255,.3);
    overflow: hidden;
}

span{
    float: left;
    padding: 5px 10px;
    color: #fff;
    font: 18px/1.5 sans-serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,.4)
}