<div class="card">
  <div class="card__body">
    <div class="card__title">Единство стиля</div>
    <div class="text">гармоничное сочетание ворот с фасадом дома</div>
  </div>
</div>
body {
  background: linear-gradient(135deg, green, blue) no-repeat;
  background-size: 100%;
  min-height: 100vh;
  padding: 1rem;
}
.card {
  background: #fff;
  max-width: 90%;
  width: 300px;
  font-size: 20px;
  border-radius: 0 0 30px 0;
  padding: 16px;
  box-shadow: 0 0 0 16px white inset, 0 0 0 18px red inset;
  
  &__body {
    padding: 16px;
    background: linear-gradient(185deg, #fff, #fff 35%, transparent);
    position: relative;
    
    &::after {
      content: '';
      width: 20px;
      height: 20px;
      border-radius: 100px;
      background: red;
      position: absolute;
      right: -9px;
      top: 40%;
    }
  }
  
  &__title {
    font-weight: bold;
    margin-bottom: 1rem;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.