带 CSS 的方括号

Question

我希望仅使用 CSS 创建一个 [ 和 ] 括号。有没有办法指定顶部和底部边框（不切片图像）使其看起来像一个括号？

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

Answer 1

.b:after {
  content: "]"
}

.b:before {
  content: "["
}

<span class="b">text</span>

工作示例：http://codepen.io/yardenst/pen/bhGIy

Answer 2

你可以在纯css中不使用任何伪元素来绘制方括号。

步骤：

• 创建一个类似<div> 或<span> 的元素并将其设置为inline-block，以便其长度取决于其内容，即此元素的长度将与其中的内容一样长。
• 应用左/右边框。
• 使用linear-gradient() 创建4 个带有特定width / height 的背景图像，并使用background-position 在框的每个角上绘图。 background-size 的高度因子应等于 border-left-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;
}

有用的资源：

• 线性渐变：MDN、W3。

• 背景图片：MDN、W3。

输出图像：

* {box-sizing: border-box;}

body {
  background: linear-gradient(white, silver);
  min-height: 100vh;
  margin: 0;
}

.widget-title {
  font: 20px/26px Arial, sans-serif;
  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;
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  text-align: justify;
  border-width: 0 3px;
  display: inline-block;
  vertical-align: top;
  padding: 5px 15px;
  margin: 20px;
}

<h4 class="widget-title widgettitle">WHAT’S NEW</h4>

<h4 class="widget-title widgettitle">This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence...</h4>

Answer 3

您可以将 :after 和 :sbefore 伪元素与 content 属性一起使用。

More info

类似

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

Answer 4

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

<div class="wrapper">
    <div class="left">
        <div class="stick"></div>
        <div class="empty"></div>
        <div class="stick"></div>
    </div>
    <div class="content">Div content</div>
    <div class="right">
        <div class="stick"></div>
        <div class="empty"></div>
        <div class="stick"></div>
    </div>
</div>​

CSS：

.wrapper{
    border-bottom: 2px solid #FF0000;
    border-top: 2px solid #FF0000;
    height: 100px;
    width: 300px;
}
.stick{
    border-left: 2px solid #FF0000;
    height: 33%;
}
.empty{
    height: 34%;
}
.content{ float: left }
.left{ float: left; height: 100%; }
.right{ float: right; height: 100%; }
.clear{ clear: both }

演示：http://jsfiddle.net/Q8g4F/

Answer 5

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

$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;
  }
}

工作示例可在此处获得：https://jsfiddle.net/1uuodzdw/