css3 - Desing Border css Left Bottom css Code -

i wondering if possible create shape using css. (or svg?)
feed dynamicly created news feeds need scroll inside contianer.

i got stuck after create container scrolling:

.container {    width: 300px;    height: 500px;    background-color: blue;    border-radius: 15px;    overflow-x: scroll;  }  .container {    display: inline-block;    width: 100%;    height: 60px;    border-bottom: 5px solid rgba(255, 255, 255, 0.5);  }    .container .icon {    display: inline-block;    width: 50px;    height: 100%;    text-indent: 25px;    color: white;    font-weight: bold;    line-height: 50px;  }

<div class="container">    <a><div class="icon">f</div>text goes in here</a>    <a><div class="icon">f</div>text goes in here</a>    <a><div class="icon">f</div>text goes in here</a>    <a><div class="icon">f</div>text goes in here</a>    <a><div class="icon">f</div>text goes in here</a>    <a><div class="icon">f</div>text goes in here</a>    <a><div class="icon">f</div>text goes in here</a>    <a><div class="icon">f</div>text goes in here</a>    <a><div class="icon">f</div>text goes in here</a>    <a><div class="icon">f</div>text goes in here</a>  </div>

there many approaches creating shape , design looking for. whilst svg may great option here, pure css solution may possible through use of css border hack. very rough demo of like:

.area {    height: 300px;    width: 200px;    background: lightgray;    position: relative;    margin: 50px;  }  .area:before {    content: "";    top: -20px;    left: -20px;    position: absolute;    height: 0;    width: 100%;    border-right: 20px solid transparent;    border-left: 20px solid transparent;    border-bottom: 20px solid lightgray;  }  .area:after {    content: "";    position: absolute;    height: 20%;    width: 0;    left: -20px;    top: -20px;    left: -20px;    border-right: 20px solid lightgray;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;  }  .areainner {    position: absolute;    height: 100%;    width: 100%;    top: 0;    left: 0;  }  .areainner:before {    content: "";    position: absolute;    bottom: -20px;    left: -20px;    height: 50%;    width: 0;    border-right: 20px solid lightgray;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;  }  .areainner:after {    content: "";    position: absolute;    bottom: -20px;    left: -20px;    height: 0;    width: 60%;    border-right: 20px solid transparent;    border-left: 20px solid transparent;    border-top: 20px solid lightgray;  }  .last {    position: absolute;    top: -20px;    left: 100%;    width: 0;    height: calc(100% - 20px);    border-left: 20px solid lightgray;    border-top: 20px solid transparent;    border-bottom: 20px solid transparent;  }  .yourtext {    position: absolute;    height: 100%;    width: calc(100% -10px);    top: 0;    left: 0;    overflow-y: auto;    padding-left:10px;  }

<div class="area">    <div class="areainner">      <span class="last"></span>      <div class="yourtext">        lorem ipsum dolor sit amet, consectetur adipiscing elit. aenean vitae diam mauris. phasellus egestas mauris dui, eget tempor tortor commodo vel. aenean aliquam nunc @ sem sodales, vitae condimentum orci malesuada. aenean eu tortor ornare, dignissim turpis        vel, hendrerit ante. cras lobortis vehicula nisl eu lacinia. integer eu faucibus sapien. in hendrerit odio ac blandit placerat. morbi suscipit faucibus magna, nec semper sapien efficitur in. duis metus neque, consequat @ sem eu, tempor lobortis        mauris. nulla consectetur pretium ex, @ luctus neque. duis rutrum gravida dolor, sit amet ornare velit condimentum vel. nunc pulvinar elit. donec id nisi id massa pulvinar porta. quisque hendrerit quam nec nunc interdum, bibendum quam pellentesque.        sed nisl quam, egestas ut volutpat non, lacinia @ neque. vestibulum sagittis tellus odio finibus ultrices. maecenas porttitor sit amet mi non congue. ut feugiat, purus tempus elementum vestibulum, diam dui euismod odio, @ venenatis augue lorem        in arcu. vivamus sed dolor vel ipsum lacinia rhoncus. integer et odio porttitor, vulputate turpis sed, cursus nibh. suspendisse ac mi fermentum, fringilla lorem ac, imperdiet neque. aliquam erat volutpat. sed ac urna urna. fusce felis massa, interdum        vel orci at, iaculis fermentum nulla. etiam auctor lobortis vulputate. ut quis quam est. sed venenatis metus id nisi elementum, et tincidunt est mattis. aenean elementum odio et odio sollicitudin, nec pretium libero malesuada. phasellus velit tortor,        elementum et imperdiet non, dapibus vel nisi. maecenas @ consequat justo. pellentesque sodales velit eget augue interdum, vitae commodo erat commodo. pellentesque in quam aliquam, elementum urna vehicula, egestas ipsum. cras tempus leo viverra        felis laoreet convallis. nullam urna metus, volutpat sed eros nec, faucibus lobortis magna. curabitur bibendum volutpat pellentesque. curabitur mi libero, rhoncus ut lorem eget, viverra tristique dui. proin congue dapibus orci, sit amet cursus mi        molestie at. nam aliquet velit. sed mattis nibh eget facilisis imperdiet. cras porttitor urna consequat, laoreet mauris nec, rhoncus est. suspendisse id nisl dolor. nullam accumsan justo metus, vitae ullamcorper magna mattis non. suspendisse ac        arcu nibh. pellentesque id faucibus purus. nullam sit amet tortor non nibh dignissim fringilla. donec varius, leo id bibendum fringilla, arcu nunc cursus ipsum, gravida laoreet arcu eros non erat. donec viverra accumsan turpis, et convallis libero        congue maximus. fusce nec placerat ipsum      </div>    </div>  </div>