为 linear-gradient 形状添加边框

Question

我需要在背景中制作带有黑色边框的三角形，我正在使用 linear-gradient 来获取三角形，但我无法确定是否可以添加边框。

这是我得到的：

这就是我需要的：

代码：

#intro{
  display: block;
  background: 
  linear-gradient(to bottom left,transparent 50%,#DFC7A9 0) bottom left/100% 40% no-repeat,
  transparent; 
}

Answer 1

您只需在两者之间添加两个额外的色标。例如，如果您希望边框有 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%, black 49%, black 51%, #DFC7A9 51%) bottom left / 100% 40% no-repeat, transparent;
  width: 100%;
  height: 100vh;
}

<div id="intro"></div>

Answer 2

这个解决方案不使用线性渐变，但它有点管用。我不知道这是不是一个好的答案，但看起来应该是这样。

.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>

Answer 3

您也可以使用 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>

为 linear-gradient 形状添加边框

Add a border to a linear-gradient shape

css

shapes

css-shapes