Есть ли аналог функции Union из Фигмы в CSS?

Question

В моем макете есть фигура, которая сделана путем объединения двух прямоугольников с скругленным радиусом. Я мог бы сделать это картиной svg, но кроме нее в макете есть карточки, сверстанные подобным образом. Как в CSS добиться такого же результата?

Я пробовал использовать :before, но не получается добиться ровного скругления.

Answer 1

body{
  margin: 0;
  padding: 0;
}

.container{
  margin: 0 auto;
  width: 300px;
}

.heading{
  width: 100%;
  background-color: rgba(162, 162, 162, 0.46);
  border-radius: 15px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.heading:last-child{
  margin-bottom: 0;
}

.box{
  width: 80px;
  height: 40px;
  background-color: rgba(162, 162, 162, 0.46);  
}

.right{
  position: relative;
  left: 235px;
}

.left{
  position: relative;
  left: 20px;
  
}

.white{
  width: 40px;
  height: 40px;
  background-color: white;
  border-radius: 50px;
  position: relative;
}

.start{
  right: 20px;
}

.end{
  left: 60px;
  bottom: 40px;
}

<div class="container">
        <div class="heading one">
            <h1>Lorem.</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero expedita enim molestiae, labore saepe deserunt officia earum aut excepturi iste?</p>
        </div>
        <div class="box right">
            <div class="white start"></div>
            <div class="white end"></div>
        </div>
        <div class="heading two">
            <h1>Lorem.</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero expedita enim molestiae, labore saepe deserunt officia earum aut excepturi iste?</p>
        </div>
        <div class="box left">
            <div class="white start"></div>
            <div class="white end"></div>
        </div>
        <div class="heading three">
            <h1>Lorem.</h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero expedita enim molestiae, labore saepe deserunt officia earum aut excepturi iste?</p>
        </div>
    </div>

Это решение не претендует на правильное, но такой способ может жить.

Логика простая, я в ручную создаю нужные мне блоки для того чтобы отрисовать(закрыть) другие.

Что касается квадратов:

.body{
  margin: 0;
  padding: 0;
}

.container{
  margin: 0 auto;
  position: relative;
  width: 400px;
}

.box{
  width: 200px;
  height: 200px;
  background-color: blanchedalmond;
  border-radius: 20px;
}

.white{
  width: 190px;
  height: 190px;
  background-color: white;
}

.split{
  background-color:  blanchedalmond;
  width: 80px;
  height: 80px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 1;
}

.three{
  position: relative;
  left: 50%;
}

.all{
  background-color: white;
  position:absolute;
  width: 190px;
  height: 190px;

}

.right{
  position: absolute;
  left: 50%;
  bottom: 50%;
  z-index: 10;
  border-radius: 35px;
}

.left{
  position: absolute;
  right: 50%;
  top: 50%;
  z-index: 10;
  border-radius: 35px;
}

<div class="container">
    <div class="box one"></div>
    <div class="all right"></div>
    <div class="split"></div>
    <div class="all left"></div>
    <div class="box three"></div>
</div>

БЛОГ НА HUSL

Есть ли аналог функции Union из Фигмы в CSS?

Ответы (1 шт):