带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: "["
}

工作实例: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>