How can i achieve a cutout of a heartbeat in a square at the bottom by css?-CodePudding

I want to cut out a kind of heartbeat in a green square at the bottom. Can I achieve this by css?

In this photo attachment you can see what I would like. I have highlighted the heartbeat with a red marker.

CodePudding user response：

I would use a SVG placed as a background of a pseudoelement:

.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="#07ffa2" /></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>

CodePudding user response：

Use clip-path for this:

.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>