Html 带CSS的方括号

我想用CSS创建一个

[

和

]

括号。有没有办法指定上下边框（无需切片图像），使其看起来像一个括号

.bracket {
  border-top:20px;
  border-bottom:20px;
  border-right:none;
  border-left: 1px solid black; 
}

.b:之后{
内容：“]”
}
b:以前{
内容：“[”
}

---

text

您可以使用带有content属性的：after和：sbefore伪元素

差不多

.bracket:after { content: ']' }
.bracket:before { content: '[' }

---

不直接，但您可以这样做： HTML:

---

演示：

这可以通过使用容器的：before和：after伪元素来实现。 Sass代码：

$container-selector: h1;
$bg-color: white;
$bracket-color: orange;
$bracket-width: 10px;
$bracket-length: 30px;
// just reset
body {
  background-color: $bg-color;
}

// not really related
$container-selector {
  padding: 0 30px;
}

$container-selector {
  position: relative;
  border: $bracket-width solid $bracket-color;
  &:before,
  &:after {
    content: "";
    display: block;
    position: absolute;
    top: -$bracket-width;
    right: $bracket-length - $bracket-width;
    left: $bracket-length - $bracket-width;
    height: $bracket-width;
    background-color: $bg-color;
  }
  &:after {
    top: initial;
    bottom: -$bracket-width;
  }
}

---

这里有一个工作示例：

您可以在纯css中不使用任何伪元素而绘制方括号

步骤：

div {
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb);

  background-repeat: no-repeat;
  background-size: 8px 3px;
                    // ^^^ This value should be equal to width of left OR right border.
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  border-width: 0 3px;
}

• 创建一个类似
  或
  的元素，并将其设置为

  内联块

  ，使其长度取决于其内容，即此元素的长度与其内部内容的长度相同
• 应用左/右边框
• 使用

  linear-gradient（）

  创建4个具有特定

  宽度的背景图像

  /

  高度

  ，并使用

  背景位置

  在框的每个角上绘制。

  背景大小

  的高度因子应等于

  边框左宽度

必要的CSS:

div {
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb);

  background-repeat: no-repeat;
  background-size: 8px 3px;
                    // ^^^ This value should be equal to width of left OR right border.
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  border-width: 0 3px;
}

有用资源：

div {
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb);

  background-repeat: no-repeat;
  background-size: 8px 3px;
                    // ^^^ This value should be equal to width of left OR right border.
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  border-width: 0 3px;
}

• 线性梯度：

• 背景图像：

输出图像：

div {
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb);

  background-repeat: no-repeat;
  background-size: 8px 3px;
                    // ^^^ This value should be equal to width of left OR right border.
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  border-width: 0 3px;
}

*{框大小：边框框；}
身体{
背景：线性梯度（白色、银色）；
最小高度：100vh；
保证金：0；
}
.小部件标题{
字体：20px/26px Arial，无衬线；
背景图像：线性梯度（#ffb1bb，#ffb1bb），
线性梯度（#ffb1bb，#ffb1bb），
线性梯度（#ffb1bb，#ffb1bb），
线性梯度（#ffb1bb，#ffb1bb）；
背景重复：无重复；
背景尺寸：8px 3px；
背景位置：左上、右上、左下、右下；
边框：实心#ffb1bb；
文本对齐：对齐；
边框宽度：0.3px；
显示：内联块；
垂直对齐：顶部；
填充：5px15px；
利润率：20px；
}

有什么新鲜事吗
这是一些虚拟和多行文本，在这句话中没有任何意义，这是一些虚拟和多行文本，在这句话中没有任何意义，这是一些虚拟和多行文本，在这句话中没有任何意义…

你有什么理由不能只使用

[

和

]

？@YardenST很酷的解决方案，我可以用它来添加括号来包装不同大小的图像吗？@amanda，括号应该在图像的高度？@YardenST是正确的，它们应该继承图像的高度image@AmandaSky：after和：before就目前而言，img标签不支持。有些事情是可以做的，但是需要另一个问题：）：：after和：：before是新语法（）