【问题标题】：I want to make a border like this please click on the link to see the border我想做这样的边框请点击链接查看边框
【发布时间】：2022-01-26 14:22:06
【问题描述】：

边框在左侧有切边。这是我要制作的边框：

这是我的代码，我需要进行哪些更改？

 <section class="started">
      <div class="container">
        <div class="row">
          <div class="col-3">
            <div class="box1 text-center">
              <h3>All started in 1956</h3>
              <h3>A fresh breeze of modern furniture in town!</h3>
            </div>
          </div>
        </div>
      </div>
    </section>
.box1 {
  height: 300px;
  background: #fff;
  position: relative;
}

.box1:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-top: 12px solid #000000;
  border-left: 12px solid #000000;
  border-right: 12px solid #000000;
  border-bottom: 12px solid #000000;
  width: 0;
}

【问题讨论】：

你有代码吗？如果我们看不到有什么问题，我们将无法帮助您修复任何问题。
这里是代码的html
不确定您是否可以轻松做到这一点。您可能必须使用线性渐变。
您提供的 html 代码如何与示例图像相匹配？您的图像上没有文字。里面会有文字吗？创建图像上显示的内容将是微不足道的，但我想这不是实际的残局；为了提供实际有用的提示/代码，您需要提供更多有关您尝试制作的内容的背景信息。
好的，请帮助我如何用线性渐变制作这个你知道吗？

标签： html css

【解决方案1】：

使用`::before`伪选择器

我在 CSS 中使用 ::before 伪元素的技巧，因为它是创建一个新元素，我们可以设置它的样式，做你想做的事:)

在你的父元素中创建一个边框（在我的例子中是.container）
获取边框的粗细

示例：border: 0.5em solid black; 是 0.5em（您可能有数字以像素为单位）

创建一个::before 或::after 伪元素
将边框粗细的值添加到::before的width
将父级设置为position: relative，这样我们就可以将absolute 用于PseudoElement
将父 .container 设置为 display: grid;，这样我们就可以轻松地将这个 PseudoElement 与 place-items: center; 居中

现在真正的诀窍就在这里

当你使用这行时：

  background-color: white;
  position: absolute;
  left: -0.5em;
  width: 0.5em;

完整代码

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

.container {
  height: 80vh;
  width: 80vw;
  border: 0.5em solid black;
  position: relative;
  display: grid;
  place-items: center;
}

.container::before {
  content: "";
  background-color: white;
  position: absolute;
  left: -0.5em;
  height: 40vh;
  width: 0.5em;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">
  </div>
</body>

</html>

【讨论】：

谢谢你的朋友你解决了我的问题。再次感谢你的队友。！上帝祝福你！ @Laaouatni 阿纳斯
@AbdurrafaySaqlain 现在我也放了一个详细的解释：）感谢您的帮助！

【解决方案2】：

要制作这样一个缺少片段的框，这是一种方法，尽管可能必须调整线性梯度以适应浏览器的兼容性。

.box {
  position:relative;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  width: 100px;
  height:100px;
  }
 #border-segment {
 position:absolute;
 bottom:0px;
 height:1px;
 width:100%;

 background: -moz-linear-gradient(left, #000000 0%, #000000 33%, #FFFFFF 33%, #FFFFFF 66%, #000000 66%, #000000 100%);

 }

&lt;div class="box"&gt;&lt;div id = "border-segment"&gt;&lt;/div&gt;&lt;/div&gt;

【讨论】：

谢谢@SScotti。真的很感谢你的努力！快乐编码！你的代码也对我有很大帮助。

使用::before伪选择器

现在真正的诀窍就在这里

完整代码

使用`::before`伪选择器