Прерывистая рамка посередине css

197

26 мая 2018, 13:20

Ребята, не знаю как реализовать данную рамку

Думала воспользоватся before, after, но мудрила и ничего не вышло. подскажите, пожалуйста

Answer 1

Вариант если фон всего блока просто цвет:

* { 
  box-sizing:border-box; 
} 
 
section { 
  background: #fff; 
} 
 
h1 { 
  text-align: center; 
  color: #f9cf1d; 
  font-size: 50px; 
} 
 
.box { 
  border: 5px solid #f9cf1d; 
  padding: 1rem; 
  min-height: 300px; 
  position: relative; 
  margin: 25px; 
  background: #fff; 
} 
 
a { 
  text-decoration: none; 
  font-size:50px; 
  color: skyblue; 
  padding: 10px; 
  width: 50px; 
  line-height: 50px; 
  position: absolute; 
  top: 50%; 
  background: #fff; 
   
  transform:translateY(-50%); 
} 
 
.left { 
  left: -25px; 
} 
 
.right { 
  right: -25px; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
   
<section> 
  <div class="box"> 
    <a href="#" class="left"><i class="fa fa-angle-left" aria-hidden="true"></i></a> 
    <a href="#" class="right"><i class="fa fa-angle-right" aria-hidden="true"></i></a> 
     
    <h1> Hello, World</h1> 
  </div> 
</section>

Вариант если фон задан не монотонный:

* { 
  box-sizing:border-box; 
} 
 
section { 
  background: url(https://images.unsplash.com/photo-1525286944502-268e726aece1?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e5072792ce04efef19c40a9b54cd3503&auto=format&fit=crop&w=600&q=60) center no-repeat; 
  -webkit-background-size: cover; 
  background-size: cover; 
  padding: 20px 0; 
} 
 
h1 { 
  text-align: center; 
  color: #fff; 
  font-size: 50px; 
} 
 
.box { 
  border-top: 5px solid #f9cf1d; 
  border-bottom: 5px solid #f9cf1d; 
  padding: 1rem; 
  min-height: 300px; 
  position: relative; 
  margin: 25px; 
} 
 
a { 
  text-decoration: none; 
  font-size:50px; 
  color: #fff; 
  width: 48px; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  padding: 0; 
  overflow: hidden; 
} 
 
.left { 
  left: -24px; 
  text-align: left; 
} 
 
.right { 
  right: -24px; 
  text-align: right; 
} 
 
a>span { 
  display: inline-block; 
  vertical-align: middle; 
  position: relative; 
  top: 50%; 
  transform:translateY(-50%); 
} 
 
.left>span>i { 
  margin-left: 16px; 
} 
 
.right>span>i { 
  margin-right: 16px; 
} 
 
a>span:before, 
a>span:after { 
  content: ''; 
  width: 5px; 
  background: #f9cf1d; 
   
  position: absolute; 
} 
 
a.left>span:before, 
a.left>span:after { 
  left: 24px; 
} 
 
a.right>span:before, 
a.right>span:after { 
  right: 24px; 
} 
 
a>span:before { 
  top: -9999px; 
  bottom: 100%; 
} 
 
a>span:after { 
  top: 100%; 
  bottom: -9999px;; 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> 
   
<section> 
  <div class="box"> 
    <a href="#" class="left"><span><i class="fa fa-angle-left" aria-hidden="true"></i></span></a> 
    <a href="#" class="right"><span><i class="fa fa-angle-right" aria-hidden="true"></i></span></a> 
     
    <h1> Hello, World! </h1> 
  </div> 
</section>

p.s: Есть еще варианты с svg.

Answer 2

Можно сделать так. Задаете блоку со стрелками высоту и ширину, которая смогла бы покрыть эту прерывность в рамке и также задаете белый фон. А сами стрелки добавляете через background: url(''); и через background-position; позиционируете их.

Answer 3

Можно менять динамически высоту

.block:before, 
.block:after{ 
  content:  '<'; 
  display: block; 
  position: absolute; 
  top: 50%; 
  width: 5px; 
  height: 10px; 
  background: white; 
  left: -5px; 
  transform: translateY(-50%) 
} 
 
.block:after{ 
  left: 100%; 
  content:  '>'; 
} 
 
.block{ 
  border: 5px solid green; 
  width: 150px; 
  height: 50px; 
  margin:  50px; 
  position: relative; 
}