Квадратные скобки с CSS

Question

Квадратные скобки с CSS

Я хочу создать скобки [ и ] только с помощью CSS. Есть ли способ указать верхнюю и нижнюю границу (без разрезания изображения), чтобы она выглядела как скобка?

.bracket {

  border-top:20px;

  border-bottom:20px;

  border-right:none;

  border-left: 1px solid black; 

}

658 5

html css css-shapes

5 ответов:

Comments

Ничего не найдено.

YardenST · Accepted Answer · 2012-11-30 20:38:23

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

 <style>
.b:after{content:"]"}
.b:before{content:"["}
</style>
Рабочий пример: http://codepen.io/yardenst/pen/bhGIy

Mohammad Usman · Accepted Answer · 2017-01-31 17:17:59

Вы можете рисовать квадратные скобки без использования каких-либо псевдо-элементов в чистом 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>

teoli · Accepted Answer · 2012-11-30 20:39:46

Вы можете использовать псевдо-элементы :after и :sbefore со свойством content.

Подробнее

Что-то вроде
.bracket:after { content: ']' }
.bracket:before { content: '[' }

kcsoft · Accepted Answer · 2012-11-30 20:49:42

Не напрямую, но вы можете сделать это вместо этого: 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/

Igor Lyubimov · Accepted Answer · 2016-07-21 18:53:25

Это возможно при использовании псевдоэлементов контейнера: 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/