Как я могу добиться вырезания в форме сердцебиения в квадрате внизу с помощью css?

Question

Я хочу сделать вырез в фоне, что-то вроде сердцебиения в зеленом квадрате внизу.

Могу ли я добиться этого с помощью css?

В прикрепленном фото вы можете увидеть то, что мне хотелось бы сделать. Я выделил сердцебиение красным маркером:

_{Свободный перевод вопроса How can i achieve a cutout of a heartbeat in a square at the bottom by css? от участника @Broxys.}

Answer 1

Я бы использовал SVG в качестве фона псевдоэлемента:

.heartbeat {
    position: relative;
    background-color: #07ffa2;
    margin: 30px;
    padding: 1px 30px;
    font: 2.8rem Arial;
    text-transform: uppercase;   
}

.heartbeat::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   block-size: 50px;
   background: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 150"><path d="M0 0 L0 50 L1000 50 L600 50 L 630 0 L 670 80 L 700 25 L 715 50 L 1000 50 L 1000 0 L0 0" fill="%2307ffa2" /></svg>') 0 0 no-repeat;
   background-size: cover;
}

body {
  height: 400px;
  background: linear-gradient(to bottom, lavender, olive);
}
<div class="heartbeat">
  
  <p>
    Lorem Ipsum sit dolor amet consectetur dolor
  </p>

</div>

_{Свободный перевод ответа от участника @Fabrizio Calderan.}

Answer 2

для этого используйте clip-path

.heartbeat {
  background: #07ffa2;
  margin: 30px;
  padding: 1px 30px;
  font: 2.8rem Arial;
  text-transform: uppercase;
  clip-path:polygon(0 0,100% 0,100% 100%,
   calc(100% - 40px) 100%,
   calc(100% - 45px) calc(100% - 10px),
   calc(100% - 60px) calc(100% + 25px),
   calc(100% - 80px) calc(100% - 25px),
   calc(100% - 90px) 100%
   ,0 100%);
  box-shadow:0 0 0 50px #07ffa2
}

body {
  height: 400px;
  background: linear-gradient(to bottom, lavender, olive);
}

<div class="heartbeat">

  <p>
    Lorem Ipsum sit dolor amet consectetur dolor
  </p>

</div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 3

SVG + CSS animation

Как очень часто комментируют на EnSO, решение таких задач с помощью SVG слишком тривиально и поэтому делают это на CSS. Как говорится: "No comments"

Ниже два примера, где кардиограмма сделана в SVG, а её анимация реализована в CSS, хотя и её проще сделать с помощью SMIL SVG.

#1. stroke-dasharray:3,359.24; и stroke-dashoffset:361.24;

Анимация начинается после наведения курсора на кнопку

body {
  height: 400px;
  background: linear-gradient(to bottom, #CFBAEB,#D4AF99);
}
#trace {
fill:none;
stroke:#00D889;
stroke-width:6;
}
#knock {
fill:none;
stroke:red;
stroke-width:6;
stroke-dasharray:3,359.24;
stroke-dashoffset:361.24; 
}
btn {
fill:black;
stroke:#000;
}
#btn:hover ~ #knock {
animation: beating 2s linear infinite;
}

@keyframes beating {
100% {stroke-dashoffset:0;}
}
#txt1 {
font-family:sans-serif;
font-size:20px;
fill:white;

}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  preserveAspectRatio="xMinYMin meet" viewBox="0 0 300 300" height="300" width="300">
  <path d="M10 0v282h192l9-29 18 48 13-31 5 12h41V0Z" fill="#00FFA3" stroke="none" />
         <!-- Button  -->
 <g id="btn"  >
 <path d="M30 174h175v36H30Z" />
   <text id="txt1" x="70" y="198" text-decoration="underline"  > Heart beat</text>
  </g> 
<path id="trace" d="M10 282h192l9-29 18 48 13-31 5 12h41" fill="none" stroke="#00D889" stroke-width="4"/>
  <path id="knock" d="M10 282h192l9-29 18 48 13-31 5 12h41" fill="none" stroke="#ed0000" stroke-width="4"/>
</svg>

#2. stroke-dasharray:361 stroke-dashoffset:361

body {
  height: 400px;
  background: linear-gradient(to bottom, #CFBAEB,#D4AF99);
}
#trace {
fill:none;
stroke:#00D889;
stroke-width:2;
}
#knock {
fill:none;
stroke:white;
stroke-width:2;
stroke-dasharray:361;
stroke-dashoffset:361; 
}
btn {
fill:black;
stroke:#000;
}
#btn:hover ~ #knock {
animation: beating 1s linear infinite;
}

@keyframes beating {
100% {stroke-dashoffset:0;}
}
#txt1 {
font-family:sans-serif;
font-size:20px;
fill:white;

}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  preserveAspectRatio="xMinYMin meet" viewBox="0 0 300 300" height="300" width="300">
  <path d="M10 0v282h192l9-29 18 48 13-31 5 12h41V0Z" fill="#00FFA3" stroke="none" />
         <!-- Button  -->
 <g id="btn"  >
 <path d="M30 174h175v36H30Z" />
   <text id="txt1" x="70" y="198" text-decoration="underline"  > Heart beat</text>
  </g> 
<path id="trace" d="M10 282h192l9-29 18 48 13-31 5 12h41" fill="none" stroke="#00D889" stroke-width="4"/>
  <path id="knock" d="M10 282h192l9-29 18 48 13-31 5 12h41" fill="none" stroke="#ed0000" stroke-width="4"/>
 
</svg>

БЛОГ НА HUSL

Как я могу добиться вырезания в форме сердцебиения в квадрате внизу с помощью css?

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

SVG + CSS animation