Обводка вокруг контента

231

20 декабря 2017, 20:11

Есть заголовок, который с двух сторон должен иметь отступ по 20px. Размер заголовка может быть разный, от 3 букв до 25. За отступами горизонтальная линия и кружок(с каждой стороны)

И есть нижняя кнопка которая устроена так же, отступ с каждой стороны по 20px. за отступами горизонтальная линия и на краях маленькая вертикальная.

{!!} Фон прозрачный! На фоне модального окна есть контент, который должен просвечиваться. А то есть бэкграунд у модалки не 100% opacity.

Как подобное реализовать?

Answer 1

На flexbox

html { 
  height: 100%; 
} 
 
body { 
  font-family: Helvetica, sans-serif; 
  font-size: 14px; 
  background: linear-gradient(to top left, powderblue, pink); 
  padding: 20px; 
  height: 100%; 
} 
 
.popup { 
  background-color: rgba(67, 67, 67, 0.2); 
  padding: 15px; 
} 
 
.inner { 
  display: flex; 
  flex-direction: column; 
  border-left: 1px solid #ffffff; 
  border-right: 1px solid #ffffff; 
  min-height: 250px; 
} 
 
h2 { 
  position: relative; 
  z-index: 1; 
  margin: 0; 
} 
 
.title { 
  display: flex; 
  position: relative; 
  top: -10px; 
} 
 
.line { 
  position: relative; 
  height: 20px; 
  flex-grow: 1; 
} 
 
.line::before, 
.circle::after { 
  content: ''; 
  position: absolute; 
} 
 
.line::before { 
  height: 1px; 
  left: 0; 
  top: 50%; 
  width: 100%; 
  background-color: #ffffff; 
} 
 
.title__text { 
  padding: 0 26px; 
   
} 
 
.circle::after { 
  right: -11px; 
  bottom: 50%; 
  transform: translateY(50%); 
  width: 8px; 
  height: 8px; 
  border: 2px solid #ffffff; 
  border-radius: 50%; 
} 
 
.right-circle::after { 
 left: -11px; 
} 
 
.content { 
  flex-grow: 1; 
  padding: 0 10px; 
} 
 
.box { 
  display: flex; 
  position: relative; 
  bottom: -9px; 
   
} 
 
.btn { 
  cursor: pointer; 
  border: 0; 
  border-left: 1px solid #ffffff; 
  border-right: 1px solid #ffffff; 
  padding: 0 20px; 
  background: transparent; 
}

<div class="popup"> 
  <div class="inner"> 
    <div class="title"> 
      <div class="left-circle  circle line"></div> 
      <h2 class="title__text">Lorem ipsum dolor sit.</h2> 
      <div class="right-circle  circle line"></div> 
    </div> 
    <p class="content"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos provident culpa doloribus, perferendis ab commodi. Quae aliquid repudiandae eum facilis doloremque, a porro consequatur enim labore molestias expedita aperiam iste similique facere eaque maxime recusandae? Nesciunt, qui. Blanditiis natus, itaque, aut unde quo ratione delectus vel dignissimos porro totam, enim, autem saepe voluptates? Ullam accusantium laborum, reiciendis sit, ea perferendis? Magni soluta aliquam quasi nostrum, minus deserunt, illum est similique asperiores commodi vel explicabo nemo quibusdam ab eaque unde possimus corporis assumenda blanditiis cum voluptatem at, vero neque. Quae ipsum labore deserunt eos quidem maiores, unde iusto molestias necessitatibus pariatur aperiam quo voluptate consequatur dolore itaque doloribus eligendi, quasi. Commodi, numquam, quam impedit sit dolore mollitia ad reprehenderit laudantium molestiae veniam illo quae eligendi, placeat adipisci. Accusantium, cupiditate dolores. Cupiditate minima facere omnis iste. Necessitatibus id amet doloribus, voluptate earum, animi magnam omnis error at qui explicabo quos ipsam natus, ad quidem. Quas illum veniam cupiditate, incidunt hic quo asperiores, et rem laudantium sint provident debitis, perferendis adipisci ab? Adipisci reiciendis, odit quis, quo, assumenda quidem vel deleniti voluptatem ex impedit similique consequatur, provident praesentium error! Quam voluptatibus, ad nobis, adipisci laboriosam error explicabo totam sapiente libero rem officia. Vitae cum iste rem dolores dolorem similique optio laborum, voluptatem, ex laboriosam. Saepe provident laudantium, quos atque delectus aspernatur quae amet assumenda iusto, dolores et eum nemo magni illum temporibus possimus nihil, voluptatum impedit rerum. Vitae est architecto dolore sint perspiciatis repellat asperiores, reiciendis aliquam quibusdam debitis quis aliquid vero nemo. 
    </p> 
    <div class="box"> 
      <div class="left-line line"></div> 
      <input type="submit" value="submit" class="btn"> 
      <div class="right-line line"></div> 
    </div> 
  </div> 
</div>

Answer 2

div.popup{ 
  width:500px; 
  padding:15px; 
  margin:10px; 
  box-sizing:border-box; 
  background:rgba(36,121,70,0.7); 
} 
div.oh{ 
  overflow:hidden; 
} 
div.head{ 
  text-align:center; 
  position:relative; 
  overflow-y:visible; 
  bottom:-15px; 
} 
div.head::before{ 
  content:""; 
  width:50px; 
  height:1px; 
  background:#19b758; 
  margin-left:0; 
  position:absolute; 
  left:0; 
  bottom:50%; 
  z-index:1; 
} 
div.head::after{ 
  content:""; 
  width:50px; 
  height:1px; 
  background:#19b758; 
  margin-right:0; 
  position:absolute; 
  right:0; 
  bottom:50%; 
  z-index:1; 
} 
div.head h2{ 
  margin:0; 
  padding:0 20px; 
  position:relative; 
  display:inline-block; 
} 
div.head h2::before{ 
  content:""; 
  width:100%; 
  height:1px; 
  background:#19b758; 
  margin-left:-100%; 
  position:absolute; 
  left:0; 
  bottom:50%; 
  z-index:1; 
} 
div.head h2::after{ 
  content:""; 
  width:100%; 
  height:1px; 
  background:#19b758; 
  margin-right:-100%; 
  position:absolute; 
  right:0; 
  bottom:50%; 
  z-index:1; 
} 
div.head h2 span{ 
  position:relative; 
  display:inline-block; 
} 
div.head h2 span::before{ 
  content:""; 
  width:6px; 
  height:6px; 
  margin-top:-4px; 
  border:1px solid #19b758; 
  border-radius:50%; 
  position:absolute; 
  top:50%; 
  left:-20px; 
  z-index:1; 
} 
div.head h2 span::after{ 
  content:""; 
  width:6px; 
  height:6px; 
  margin-top:-4px; 
  border:1px solid #19b758; 
  border-radius:50%; 
  position:absolute; 
  top:50%; 
  right:-20px; 
  z-index:1; 
} 
div.content{ 
  border-right:1px solid #19b758; 
  border-left:1px solid #19b758; 
  padding:20px; 
} 
div.content p{ 
  margin:0 0 20px 0; 
} 
div.content p:last-child{ 
  margin-bottom:0; 
} 
div.foot{ 
  text-align:center; 
  position:relative; 
  overflow-y:visible; 
  bottom:10px; 
} 
div.foot::before{ 
  content:""; 
  width:100px; 
  height:1px; 
  background:#19b758; 
  margin-left:0; 
  position:absolute; 
  left:0; 
  bottom:50%; 
  z-index:1; 
} 
div.foot::after{ 
  content:""; 
  width:100px; 
  height:1px; 
  background:#19b758; 
  margin-right:0; 
  position:absolute; 
  right:0; 
  bottom:50%; 
  z-index:1; 
} 
div.foot .input{ 
  margin:0; 
  padding:0 20px; 
  position:relative; 
  display:inline-block; 
} 
div.foot .input::before{ 
  content:""; 
  width:100%; 
  height:1px; 
  background:#19b758; 
  margin-left:-100%; 
  position:absolute; 
  left:0; 
  bottom:50%; 
  z-index:1; 
} 
div.foot .input::after{ 
  content:""; 
  width:100%; 
  height:1px; 
  background:#19b758; 
  margin-right:-100%; 
  position:absolute; 
  right:0; 
  bottom:50%; 
  z-index:1; 
} 
div.foot div.little-more{ 
  position:relative; 
  display:inline-block; 
} 
div.foot div.little-more::before{ 
  content:""; 
  width:1px; 
  height:11px; 
  margin-top:-6px; 
  background:#19b758; 
  position:absolute; 
  top:50%; 
  left:-20px; 
  z-index:1; 
} 
div.foot div.little-more::after{ 
  content:""; 
  width:1px; 
  height:11px; 
  margin-top:-6px; 
  background:#19b758; 
  position:absolute; 
  top:50%; 
  right:-20px; 
  z-index:1; 
}

<div class="popup"> 
  <div class="oh"> 
    <div class="head"> 
      <h2><span>Heading some more</span></h2> 
    </div> 
    <div class="content"> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
      <p>content content content content content content content content content content content content</p> 
    </div> 
    <div class="foot"> 
      <div class="input"> 
        <div class="little-more"> 
          <input type="submit" value="submit more value" /> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

Решение не универсальное!!!

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