deco museum

by leonsaysHi

HTML

<div class="slider--content-shape">
  <div class="deco">
    <u></u>
    <u></u>
    <u></u>
  </div>
  <div class="content">
    <h6>Próximas exhibiciones</h6>
    <p>Fusce vitae nisl molestie dolor tincidunt mollis. Proin efficitur purus quis ipsum egestas, quis bibendum dui lacinia. Pellentesque tellus diam, porta quis finibus sed, imperdiet eget nulla.</p>
  </div>
</div>

SCSS

body {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0;
  min-height: 100vh;
}
.slider--content-shape {
  position: relative;
  overflow: hidden;
  max-width: 500px;
  .deco {
    position: absolute;
    z-index: -1;
    top: 0; right: 0; bottom: 0; left: 0;
    > u:nth-child(1) {
      position: absolute;
      z-index: 1;
      left: 10%;
      top: -2rem;
      right: 0;
      height: 65%;
      background-color: red;
      border-radius: 200px 0 0 200px;
    }
    > u:nth-child(2) {
      position: absolute;
      z-index: 2;
      left: calc( (100% - 15%) * .5 );
      top: 50px;
      right: 0;
      height: 400px;
      background-color: #36b0e1;
    }
    > u:nth-child(3) {
      position: absolute;
      z-index: 3;
      left: 0;
      top: 50px;
      right: 15%;
      bottom: 0;
      display: flex;  
      flex-direction: column;
      align-items: stretch;
      &:before {
        content:'';        
        width: 100%;
        background-color: #1b50a3;
        padding-top: 100%;
        border-radius: 50% 50% 0 0;
      }
      &:after {
        content:'';  
        display: block;
        margin-top: -50%;
        height: 100%;
        background-color: #1b50a3;
      }
    }
  }
  .content {
    margin: 33% 15% 0 0;
    padding: 2rem;
    color: white;
    > * { margin-top: 0 }
  }
}