<分区>
<分区>
我想在我的元素中使用三 Angular 形背景。
我已经尝试了一些东西并且顶部箭头/三 Angular 形有效(参见示例 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。有人可以告诉我在哪里看吗？
最佳答案
要将顶部三 Angular 形转换为底部三 Angular 形，请将当前 Angular 加 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>如果您想要顶部和底部三 Angular 形，您可以从透明颜色开始，以透明颜色结束。
.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>关于html - CSS三 Angular 形背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58658055/