Test

by kiwifraise

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="container">

<div class="module1">
  					<div class="row">
  						<div class="col-sm-4">
  							<div class="cellHolder">
  								<div class="cell">
	  								<a href="#" class="btn btn-aura">Se e-développer</a>
	  								<h3>Pourquoi se lancer dans le e-commerce ?</h3>
	  								<div class="description">
	  									Pour communiquer en temps réel auprès de vos clients et prospects, les réseaux sociaux sont idéaux du fait de leur instantanéité.
	  								</div>
	  								<a href="#" class="read-more" aria-label="Lire la suite">Lire la suite</a>
	  							</div>
  							</div>
  						</div>
  						<div class="col-sm-4">
  							<div class="cellHolder convex">
	  							<div class="cell convex">
										<a href="#" class="btn btn-aura">Se e-développer</a>
	  								<h3>Comment se lancer dans le e-commerce ?</h3>
	  								<div class="description">
	  									Se lancer dans le e-commerce OUI, mais par où commencer : design, paiement, livraison, produits, stock ?
	  								</div>
	  								<a href="#" class="read-more" aria-label="Lire la suite">Lire la suite</a>
	  							</div>
	  						</div>
  						</div>
  						<div class="col-sm-4">
  							<div class="cellHolder">
	  							<div class="cell concave">
	  								<h3>Innovation, ressources humaines, développement éco responsable...</h3>
	  								<div class="description">
	  									Il y a ceux qui s’informent frénétiquement, et ceux qui ne savent jamais à quel saint se vouer. 
	  								</div>
	  								<a href="#"...

SCSS

.module1 {
  padding:30px;

  .cellHolder {
    overflow: hidden;

    &.convex {
      margin-right: -30px;
    }

    .cell {
      min-height: 500px;
      border: 2px solid var(--orange);
      padding: 25px;

      &.convex {
        position: relative;
        background: #fff;
        padding: 25px 50px 25px;
        border: none;

        &:before {
          position: absolute;
          top: 0;
          left: 0;
          width: calc(100% - 55px);
          height: 100%;
          content: "";
          display: block;
          pointer-events: none;
          /*clip-path: ellipse(50% 50% at 50% 50%);*/
          border-radius: 6px 0 0 6px;
          border: 2px solid var(--orange);
          border-right: none;
        }

        &:after {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate3d(0, -50%, 0);
          width: calc(100% + 3px);
          height: 143%;
          content: "";
          display: block;
          pointer-events: none;
          /*clip-path: ellipse(50% 50% at 50% 50%);*/
          border-radius: 0 100% 100% 0;
          border: 2px solid var(--orange);
        }
      }

      &.concave {
        position: relative;
        padding: 25px 25px 25px 100px;
        border: none;
        background: var(--orange);
        color: #fff;
        overflow: hidden;

        &:after {
          position: absolute;
          top: 50%;
          right: calc(100% - 50px);
          transform: translate3d(0, -50%, 0);
          width: 100%;
          height: 150%;
          content: "";
          display: block;
          background: #fff;
          /*clip-path: ellipse(50% 50% at 50% 50%);*/
          border-radius: 100%;
        }
      }
    }
  }
}