title: How to make inverted rounded corners and "bend" content to follow curved container
body: <p>The carousel is designed with a rounded bottom, and the captions should follow that... I'm lost on how to achieve this.</p>
  <p>The curved bottom comes from this code on my carousel:</p>
  <pre><code>.round-carousel {
      height: 600px;
      border-bottom-left-radius: 80% 20%;
      border-bottom-right-radius: 80% 20%;
      overflow-y: hidden;
      width: 105%;
      left: -3%;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/4OQBE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4OQBE.jpg" alt="wanted results" /></a></p>
  <p>The thing I have so far... I'm lost on how to make the div curved. Maybe it's late at night and my brain is not functioning..</p>
  <pre><code>.carousel-indicators {
      height: 80px;
      background: rgba(0,0,0,0.5);
      width: 100%;
      margin: auto;
  }
  
  .carousel-indicators li {
      font-size: 0.9rem;
      height: 40px;
      text-indent: inherit;
      background: none;
      display: flex;
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      -webkit-justify-content: flex-end;
      -moz-justify-content: flex-end;
      -ms-flex-pack: end;
      width: 12%;
      line-height: 1.3rem;
      position: relative;
      margin: 0 15px;
      flex-direction: column;
      -webkit-flex-direction: column;
  -ms-flex-direction: column;
  -moz-flex-direction: column;
      text-align: center;
  }
  
  .carousel-indicators li:after{
      height: 8px;
      width: 8px;
      border-radius: 100%;
      content: &quot; &quot;;
      background: #fff;
      position: absolute;
      left: 50%;
      bottom: -20px;
  }
  
  .carousel-indicators li.active{
  color: #72c267;
  }
  
  .carousel-indicators li.active:after{
  height: 10px;
  width: 10px;
  background: #72c267;
  box-shadow: 0 0 0 2px #72c267;
  border: 2px solid rgba(0, 0, 0, 0.6);
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/APsSJ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/APsSJ.jpg" alt="how to bend???" /></a></p>
  <p>EDIT: Adding HTML
  Using bootstrap on wordpress, so this has some variables on php as well:</p>
  <pre><code>&lt;section id=&quot;slider&quot;&gt;
      &lt;div class=&quot;container-fluid&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;div class=&quot;col-12 px-0&quot;&gt;
                  &lt;div id=&quot;carouselExampleSlidesOnly&quot; class=&quot;carousel slide main-image-slider&quot; data-ride=&quot;carousel&quot; data-interval=&quot;5000&quot;&gt;
                      &lt;div class=&quot;carousel-inner round-carousel&quot;&gt;
                          &lt;ol class=&quot;carousel-indicators align-items-center&quot;&gt;
                              &lt;?php  $number = 0;
          foreach(Home::getRepeatable(get_the_ID(),'carrousel_slide') ?? [] as $key =&gt;
                              $value): ?&gt;
                              &lt;li class=&quot;&lt;?= $key === 0 ? 'active' : '' ?&gt;&quot; data-target=&quot;#carouselExampleSlidesOnly&quot; data-slide-to=&quot;&lt;?php echo $number++; ?&gt;&quot;&gt;&lt;?php echo $value['ss_slide_title'];?&gt;&lt;/li&gt;
                              &lt;?php endforeach; ?&gt;
                          &lt;/ol&gt;
                          &lt;div class=&quot;carousel-overlay h-100 w-100&quot;&gt;&lt;/div&gt;
                          &lt;?php foreach(Home::getRepeatable(get_the_ID(),'carrousel_slide') ?? [] as $key =&gt;
                          $value):?&gt;
                          &lt;div class=&quot;carousel-item &lt;?= $key === 0 ? 'active' : '' ?&gt;&quot;&gt;
                              &lt;div class=&quot;carousel-caption&quot;&gt;
                                  &lt;p&gt;&lt;?php echo $value['ss_slide_desc']; ?&gt;&lt;/p&gt;
                                  &lt;a class=&quot;btn btn-primary btn-md&quot; href=&quot;&lt;?=  $value['ss_slide_link']; ?&gt;&quot;&gt;&lt;?php echo $value['ss_slide_button_text']; ?&gt; &lt;/a&gt;
                              &lt;/div&gt;
                              &lt;img class=&quot;img-fluid d-block w-100&quot; src=&quot;&lt;?= wp_get_attachment_url($value['ss_slide_image']); ?&gt;&quot; alt=&quot;First slide&quot; /&gt;
                          &lt;/div&gt;
                          &lt;?php endforeach ?&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>