为线性渐变形状添加边框

如何解决为线性渐变形状添加边框

我需要在背景中制作带有黑色边框的三角形，我使用 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>