CSS降低/削减边缘

Question

我正在尝试这样排。

到目前为止我尝试过的代码， 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。

Answer 1

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

Answer 2

您也可以使用剪辑路径，但剪辑路径有时在某些浏览器中不起作用。您可以使用 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;
  }

它会显示 如果你想改变设计 你可以改变背景大小 比如你会做 background-size:70% 30%;

你会得到这个：

如果你想要圆形，你也可以得到圆形边缘，你必须使用不同的属性。