Неполные границы вокруг div

Я ищу способ создания неполного квадрата с границами с некоторым текстом и фоном с чистым css. Вот чего я пытаюсь достичь:

Моя первоначальная идея - создать форму, основанную на трех формах, а затем раскрасить границы соответственно:

Но меня немного беспокоит адаптивная версия - масштабирование трех фигур. Так может быть, лучше, кто-нибудь?

Ответ 1

Этот подход позволяет вам:

добавить любой контент, а границы будут адаптироваться вокруг него независимо от высоты или ширины содержимого
поддерживает прозрачный фон и может отображаться поверх изображения или нечетких цветов.
не добавляет никаких неземных элементов.

Он полагается на 2 абсолютно позиционированных псевдо элемента и один div. Расстояние между содержимым и границами контролируется дополнением на div:

div{
  position:relative;
  display:inline-block;
  padding:50px 100px;
  border-left:1px solid #000;
  text-align:center;
}
div:before, div:after{
  content:'';
  position:absolute;
  right:50%; left:0;
  height:50px;
  border-right:1px solid #000;
}
div:before{
  top:0;
  border-top:1px solid #000;
}
div:after{
  bottom:0;
  border-bottom:1px solid #000;
}
body{background:url('http://i.imgur.com/3IXm5qm.jpg');background-size:cover;}

<div>
  <h2>This is a very long title on<br/> 2 lines</h2>
  <button>Button</button>
  <p>Some text</p>
</div>

Ответ 2

Вы можете использовать css pseudo ::after и ::before, что-то вроде этого

.incomplete-box{
  border: solid 1px #fff;
  border-right: none;
  width: 100px;
  height: auto;
  position: relative;
}
.incomplete-box::after,
.incomplete-box::before{
  content: '';
  position: absolute;
  height: 30%;
  width: 1px;
  background-color: #fff;
  right: 0;
}
.incomplete-box::after{
  top: 0;
}
.incomplete-box::before{
  bottom: 0;
}

Demo

Фиксированная ширина и высота: https://jsfiddle.net/nikhilvkd/qt5ne3yw/

Авто ширина и высота: https://jsfiddle.net/nikhilvkd/0v3k8rv8/2/

Ответ 3

Вы можете сделать это с помощью :before и :after псевдоэлементы

Полная конструкция Fiddle

.square {
  width: 200px;
  height: 300px;
  border-left: 1px solid gray;
  border-bottom: 1px solid gray;
  border-top: 1px solid gray;
  position: relative;
}

.square:before, .square:after {
  content: "";
  height: 20%;
  position: absolute;
  right: 0;
  border-right: 1px solid gray;
}

.square:before {
  bottom: 0;
}

<div class="square"></div>

Ответ 4

Хорошо, перейдите к приведенным выше ответам, я рекомендую использовать элементы pseudo для достижения этого эффекта.

Но есть и другой способ сделать это, не используя псевдо-элементы.

Вот как вы должны это делать.

.row{display:table;table-layout:fixed;}
    .col{display:table-cell;}
    
    .row{width:250px; margin: auto;}
    .mid.row > .col{ height: 100px; }
    
    .col{ text-align: center;}
    .top.col, .bottom.col{
      border-top: 1px solid black;
      border-left: 1px solid black;
      border-right: 1px solid black;
      height: 50px;
    }
   .bottom.col{
     border-top: 0;
     border-bottom: 1px solid black;
   }
    .mid.row > .col{
      border-left: 1px solid black;
      border-right: 0;
      vertical-align: middle;
      text-align: right;
    }
   .mid.row > .col span{
      margin-right: -30px;
     max-width: 300px;
    }

<div class="row">
  <div class="top col"></div>
</div>
<div class="mid row">
  <div class="col">
    <span>Hey you can achieve this without using pseudo elements :)</span>
  </div>
</div>
<div class="row">
  <div class="bottom col"></div>
</div>