Desing Border css Left Bottom css Code

Question

I was wondering if its possible to create this shape using css. (or svg?)
The feed is dynamicly created so the news feeds need to scroll inside this contianer.

I got stuck after create a container with scrolling:

.container {
  width: 300px;
  height: 500px;
  background-color: blue;
  border-radius: 15px;
  overflow-x: scroll;
}
.container a {
  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>

Answer 1

There are many approaches to creating the shape and design you are looking for. Whilst SVG may be a great option here, a pure CSS solution may be possible through the use of the CSS border hack. A very rough demo of this would be something 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 at 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 at sem eu, tempor lobortis
      mauris. Nulla consectetur pretium ex, at luctus neque. Duis rutrum gravida dolor, sit amet ornare velit condimentum vel. Nunc a pulvinar elit. Donec id nisi id massa pulvinar porta. Quisque hendrerit quam nec nunc interdum, a bibendum quam pellentesque.
      Sed nisl quam, egestas ut volutpat non, lacinia at neque. Vestibulum sagittis tellus a odio finibus ultrices. Maecenas porttitor sit amet mi non congue. Ut feugiat, purus tempus elementum vestibulum, diam dui euismod odio, at 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 at 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 a 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>