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>またはの<span>ような要素を作成し、inline-blockその長さがコンテンツに依存するようにします。つまり、この要素の長さは、その中のコンテンツと同じ長さになります。
• 左/右の境界線を適用します。
• 特定の/を使用linear-gradient()して4つの背景画像を作成し、ボックスの各隅にを使用して描画するために使用します。の高さ係数はに等しくなければなりません。widthheightbackground-positionbackground-sizeborder-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

contentプロパティで：afterおよび：sbefore疑似要素を使用できます。

より詳しい情報

何かのようなもの

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