问题描述
我需要在背景中制作带有黑色边框的三角形,我使用 linear-gradient
来获取三角形,但我不知道是否可以添加边框。
代码:
#intro{
display: block;
background:
linear-gradient(to bottom left,transparent 50%,#DFC7A9 0) bottom left/100% 40% no-repeat,transparent;
}
解决方法
您只需要在中间添加两个额外的色标。例如,如果您希望边框有 2% 的大小,那么您可以将色标更改为:
transparent 49%,black 49%,black 51%,#DFC7A9 51%
见下面的例子:
body {
margin: 0;
padding: 0;
}
#intro {
display: block;
background: linear-gradient(to bottom left,transparent 49%,#DFC7A9 51%) bottom left / 100% 40% no-repeat,transparent;
width: 100%;
height: 100vh;
}
<div id="intro"></div>
您也可以使用 filter
: drop-shadow()
。
可能的例子:
body {
margin: 0;
padding: 0;
}
#intro {
display: block;
background:linear-gradient(to bottom left,transparent 50%,#DFC7A9 50.35%) bottom left/100% 40% no-repeat,transparent;
min-height: 100vh;
filter:drop-shadow(0 -3px);
}
<div id="intro"></div>
这个解决方案不使用线性梯度,但它有点工作。我不知道这是否是一个好的答案,但看起来应该如此。
.base {
width: 500px;
height: 100px;
overflow: hidden;
}
.base div {
background-color: #DFC7A9;
transform: rotate(7deg) translate(-10%,75%);
width: 120%;
height: 100%;
border-top: 2px solid #000;
}
<div class="base">
<div></div>
</div>