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>
position:relative; z-index:5
, например. А на::before
и::after
заголовка и кнопки вешаете фентифлюшки.