Блог

Я пытаюсь создать строку, подобную этой.

Код для того, что я пробовал, 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;
}
  

Он отображает->

Он не обрезает края, как на первом изображении. Как я могу этого добиться. TIA.

Используйте clip-path для такого эффекта:

 <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%;
}
  

Вы также можете использовать путь клипа, но путь клипа иногда не работает в некоторых браузерах.Вы можете использовать свойство background-linear, чтобы получить вырезы по краям. Используйте это:

 .other {
    margin: 5vw 15vw;
    position: relative;
  }
  
  .edgeCut {
    padding: 1.5em 2em;
    background: linear-gradient(135deg,transparent 18px,#b9ffee  0)top left,linear-gradient(45deg,transparent 18px,#b9ffee  0)bottom  left,linear-gradient(-135deg,transparent 18px,#b9ffee  0)top right,linear-gradient(-45deg,transparent 18px,#b9ffee  0)bottom right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    width: 100%;
    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;
  }
  

он отобразит

и если вы хотите изменить степень
, вы можете просто изменить размер фона
, например, если вы сделаете размер фона: 70% 30%;

вы получите это:

вы также можете получить круглые ребра, если хотите, чтобы в circular вы должны использовать другое свойство.