CSS 三角形背景

Question

我想在我的项目中使用三角形背景。

我已经尝试了一些方法并且顶部箭头/三角形有效（参见示例 https://imgur.com/a/5pJ8Bd2）。

但我觉得如果我能在底部做同样的事情会更好看。

这是适用于顶部的代码：

.secondSection {
    padding-top: 75px;
    background-image: linear-gradient(-4deg, #ff7a7d 300px, transparent 0),
    linear-gradient(4deg, #ff7a7d 300px, transparent 0);
    text-align: center;
    min-height: 300px;
}

我无法在 Internet 上找到有关如何在 div 中创建简单剪切的正确信息...我宁愿不使用 svg。有人可以告诉我在哪里看吗？

Answer 1

要将顶部三角形转换为底部三角形，请将当前角度增加 180 度：

.secondSection {
  background-image: 
    linear-gradient(176deg, #ff7a7d 75%, transparent 75%),
    linear-gradient(184deg, #ff7a7d 75%, transparent 75%);
  text-align: center;
  height: 100vh;
}

body {
  margin: 0;
}

<div class="secondSection"></div>

如果你想要顶部和底部三角形，你可以从透明颜色开始，并以透明颜色结束。

.secondSection {
  background:
  linear-gradient(-4deg, transparent 25%, #ff7a7d 25%, #ff7a7d 75%, transparent 75%),
  linear-gradient(4deg, transparent 25%, #ff7a7d 25%, #ff7a7d 75%, transparent 75%);
  height: 100vh;
}

body {
  margin: 0;
}

<div class="secondSection"></div>

CSS 三角形背景

CSS triangle background

html

css

svg

arrows