.circle {
position: relative;
}
.circle::before,
.circle::after {
position: absolute;
content: "";
top: 5px;
with: 100px;
height: 0;
border-top: 1px dotted white;
}
.circle::before {
left: -100%;
}
.circle::after {
right: -100%;
}<header class="header clearfix">
<div class="left"></div>
<div class="right-top"></div>
<div class="right-bottom"></div>
</header>.left {
float: left;
width: 33%;
height: 300px;
background: green;
}
.right-top,
.right-bottom {
float: right;
width: 67%;
}
.right-top {
height: 100px;
background: red;
}
.right-bottom {
height: 200px;
background: blue;
}
.clearfix::after {
display: block;
content: '';
clear: both;
}
body {
background: url("image.jpg") no-repeat 50% 0;
}
.wrapper {
width: 1000px;
margin: 0 auto;
}border'а и добавляй вверху две черточки с помощью ::before и ::after.block {
position: relative;
border-right: 2px solid black;
border-left: 2px solid black;
border-bottom: 2px solid black;
}
.block::before,
.block::after {
position: absolute;
content: "";
width: 30px;
height: 2px;
top: 0;
background: black;
}
.block::after {
left: 0;
}
.block::before {
right: 0;
}li {
position: relative;
}
li::after {
position: absolute;
content: '';
top: 50%;
right: 0;
width: 2px;
height: 40px;
background: red;
}li может быть и a 
<div class="left">Акция ></div>
<div class="right">
<div class="right-top">Подключись за <span>3 копейки</span></div>
<div class="right-bottom">Минимальный бла-бла-бла</div>
</div>.right,
.left {
display: inline-block;
vertical-align: top;
color: red;
}
.right-top {
font-size: n px;
}
.right-top span {
color: blue;
}
.right-bottom {
font-size: n/2 px;
color: black;
}display: none;.popup-show { display: block; };.popup-show;<div> ... </div>html, body {
height: 100%;
}
div {
height: 100%;
}