Question

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

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

Answer 1

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

 <style>
.b:after{content:"]"}
.b:before{content:"["}
</style>

工作示例：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和：before伪元素，使用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伪元素来实现。 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;
  }
}

此处提供了工作示例：https://jsfiddle.net/1uuodzdw/

带CSS的方括号

5 个答案: