为线性渐变形状添加边框答案

【问题标题】：Add a border to a linear-gradient shape为线性渐变形状添加边框
【发布时间】：2021-09-06 04:42:14
【问题描述】：

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

这是我得到的：

这就是我需要的：

代码：

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

【问题讨论】：

标签： css shapes css-shapes

【解决方案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;
}

&lt;div id="intro"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

&lt;div id="intro"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

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

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

【讨论】：