CSS lower down/cut an edge

Question

I'm trying to make a row like this.

Code for so far what I tried, JSX ->

<div className={styles.other}>
    <div className={styles.edgeCut}>
      <span className={styles.blueText}>Other Less-Common Paths</span>
      <span>
        I’m <strong>security concerned</strong><img className={styles.bottomImage} src="/arrow-right.svg"></img>
      </span>
      <span>
        I’m an <strong>investor</strong><img className={styles.bottomImage} src="/arrow-right.svg"></img>
      </span>
    </div>
  </div>

CSS ->

.other {
  margin: 5vw 15vw;
  position: relative;
}

.edgeCut {
  padding: 1.5em 2em;
  background: linear-gradient(273.05deg, #b9ffee 11.12%, #c2f8ff 73.8%);
  width: 100%;
  border-radius: 36px;
  transform: rotate(-0.38deg);
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.blueText{
    color: #5C9FCF;
}

.bottomImage{
    height: 1em;
    width: 2em;
    margin-left: 0.5em;
    cursor: pointer;
}

It displays->

It doesn't cut the edges like the first image. How can I achieve this. TIA.

Answer 1

Use clip-path for this sort of effect:

<main>
  <div></div>
</main>

main {
  align-items: center;
  background: black;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100v;
}

div {
  background: white;
  clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0% 100%);
  height: 75%;
  width: 75%;
}