Card outside corner

by Csaba Hellinger

HTML

<div class="card" style="--bg: #e6f380">
  <img src="https://growbilliontreesfoundation.com/cdn/shop/files/grow-billion-trees-trees-for-forest_fef6564a-303c-4a1b-a740-3c4bac9024d6.jpg?v=1735299998" />
  <div class="body">
    <h2>Forest</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, explicabo.</p>
  </div>
</div>

<div class="card" style="--bg: #9cedf0">
  <img src="https://media.istockphoto.com/id/104669275/photo/ocean-wave.jpg?s=612x612&w=0&k=20&c=YqJ5H_NmORC6HPYHplIyzBpPEf3egtfJfn-r0C9addI=" />
  <div class="body">
    <h2>Ocean</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, explicabo.</p>
  </div>
</div>

<div class="card" style="--bg: #f08185">
  <img src="https://images.photowall.com/products/45171/dark-red-rose.jpg?h=699&q=85" />
  <div class="body">
    <h2>Rose</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, explicabo.</p>
  </div>
</div>

<div class="card" style="--bg: #d4a4e0">
  <img src="https://arborhilltrees.com/blog/wp-content/uploads/2020/06/common-purple-lilac-facts.jpg" />
  <div class="body">
    <h2>Lilac</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, explicabo.</p>
  </div>
</div>

<div class="card" style="--bg: #faab4a">
  <img src="https://backyardcitrustrees.com/cdn/shop/files/shutterstock_582494944_600x600.jpg?v=1699466580" />
  <div class="body">
    <h2>Orange</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit, explicabo.</p>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

body {
  background: darkseagreen;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'Lobster';
  margin: 4rem;
  gap: 4rem;
}

.card {
  --radius: 3rem;
  --bg: #e6f380;
  position: relative;
  width: 300px;
  height: 400px;
  background: var(--bg);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 0 2rem #0004;
  & * {
    box-sizing: border-box;
  }
  & img {
    width: 100%;
    height: calc(50% + var(--radius));
    object-fit: cover;    
  }
  /* border */
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 1px;
    border-radius:calc(var(--radius) - 1px);
    box-shadow: 
      -10rem -10rem 5rem #fff,
      10rem 10rem 5rem #000;
    mix-blend-mode: soft-light;
    pointer-events: none;
  }
  /* gradient light */
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(at 0 0, #fff6 50%, #0006 90%);
    mix-blend-mode: overlay;
    pointer-events: none;
  }
  &>.body {
    position: absolute;
    left: 0;
    top: 50%;
    bottom: 0;
    width: 100%;
    padding: 1rem;
    border-radius: 0 var(--radius) 0 0;
    background: var(--bg);
    text-align: center;
    /* outside curve */
    &::before {
      content: '';
      position: absolute;
      left: 0;
      width: var(--radius);
      height: var(--radius);
      bottom: 100%;
      background:
        radial-gradient(at top right, #0000 var(--radius), var(--bg) 0);
    }
    & * {
      mix-blend-mode: multiply;
      opacity: 0.75;
    }
    &>h2 {
      font-size: 3rem;
      margin-block: 0 0.5rem;
    }
    &>p {
      font-size: 1.3rem;
      margin: 0;
    }
  }
}