Закруглённые треугольники с полупрозрачным фоном

[Crystal-3]

Всем привет.
Озадачил меня дизайнер, ничего хорошего не могу придумать, гугл тоже отказывается помогать.
Нужно сделать вот такие штуки http://prntscr.com/nsyswi
Задача усложнена ещё тем, что фон должен быть пролупрозрачный.
Буду благодарна за подсказку.

[AlexZaw]

Мое извращение:

Нужные размеры можно либо подобрать, либо использовать JS для автоматизации. Но, имхо, лучше с SVG разобраться, так как в моем примере не получится залить полупрозрачным фоном 

See the Pen pmqBMv by Alexandr (@AlexZaw) on CodePen.

<div class="wrap">
  <ul>
    <li>
      <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem lorem lorem lorem</div><span></span>
    </li>
    <li>
      <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem</div>
    <span></span></li>
  </ul>
</div>

*, :before, :after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap{
  background: url(http://placekitten.com/1000);
}
ul{
  margin: 50px;
  list-style: none;
  display: inline-block;
}
li{
  margin-bottom: 30px;
  position: relative;
}
.el{
  position: relative;
  padding: 10px;
}
.el:before,.el:after, li:before,li:after,span:before,span:after{
  content: '';
  position: absolute;
  height: 100%;
  width: calc(50% - 40px);
  top: 0;
  border: 2px solid #ccc;  
}
.el:before{
  border-radius: 50px 0 0 50px;
  border-right: none;
  left: 0;
}
.el:after{
  right: 0;
  border-left: none;
  border-radius: 0 50px 50px 0;
}
li:before,li:after,span:before,span:after{
  width: 50px;
  top: calc(-100% + 2px);
  left: 50%;
  transform: translateX(calc(-100% + 2px));
  border: 2px solid #ccc;
  border-radius: 0 0 50% 0;
  border-top: none;
  border-right: none;
  border-left: none;

}
li:after{
  transform: scaleX(-1);
}
span{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
span:before{
  top: calc(100% - 2px);
  transform: translateX(calc(-100% + 2px)) scaleY(-1);
}
span:after{
  top: calc(100% - 2px);
  transform: scale(-1,-1);
}

 

[Switch74]

посмотрите в сторону https://webformyself.com/maski-css/
может поможет, а вообще картинкой проще всего конечно