html - 带 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>or的元素<span>并将其设置为 aninline-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 属性一起使用。

更多信息

就像是

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