Нашёл на stackoverflow этот вопрос.Так как ответа достойного там нету но автора очевидно устроило и решением он выбрал ответ...
Решил для себя попробовать реализовать, вот что вышло :
html,
body {
font-size: 16px;
background: inherit;
}
.items {
width: 768px;
height: 550px;
margin: 20px auto;
display: flex;
justify-content: space-between;
position: relative;
}
.item {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
text-align: center;
}
.item:nth-of-type(1),
.item:nth-of-type(3) {
justify-content: center;
}
.item:nth-of-type(1) .item-outer,
.item:nth-of-type(3) .item-outer {
width: 100%;
margin-top: 30px;
}
.item:nth-of-type(2) {
justify-content: space-between;
}
.item:nth-of-type(2) .item-outer {
width: 100%;
margin: 30px 0;
}
.center {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.itemed:nth-of-type(1) {
transform: rotate(-17deg)translate(-50%, -50%);
}
.itemed:nth-of-type(2) {
transform: rotate(-10deg)translate(-50%, -50%);
}
.itemed:nth-of-type(3) {
transform: rotate(-3deg)translate(-50%, -50%);
}
.itemed:nth-of-type(4) {
transform: rotate(3deg)translate(-50%, -50%);
}
.itemed:nth-of-type(5) {
transform: rotate(10deg)translate(-50%, -50%);
}
.itemed:nth-of-type(6) {
transform: rotate(17deg)translate(-50%, -50%);
}
.itemed {
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform-origin: -25% 150% 0;
box-sizing: padding-box;
border: 4px dashed red;
background: #fff;
transition: 0.5s;
padding: 4px;
}
.itemed:hover {
/* здесь на css или на js сделаю подчёркивание нужного заголовка*/
}
<div class="items">
<div class="item">
<div class="item-outer">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Molestiae eos minima quae necessitatibus hic, ratione quis voluptas atque eligendi beatae.
</div>
<div class="item-outer">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit ex ea sequi tempore ad atque porro ratione, id provident fuga!
</div>
</div>
<div class="item">
<div class="item-outer">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae porro libero ex eos repellendus nisi eum sunt aliquid quod error.
</div>
<div class="item-outer">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia ipsa incidunt qui animi eveniet, hic consectetur dolor sapiente sit sunt.
</div>
</div>
<div class="item">
<div class="item-outer">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae porro libero ex eos repellendus nisi eum sunt aliquid quod error.
</div>
<div class="item-outer">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia ipsa incidunt qui animi eveniet, hic consectetur dolor sapiente sit sunt.
</div>
</div>
<div class="center">
<div class="itemed"></div>
<div class="itemed"></div>
<div class="itemed"></div>
<div class="itemed"></div>
<div class="itemed"></div>
<div class="itemed"></div>
</div>
</div>
Вопрос в том, каким образом реализовать именно такой бардюр как на скриншоте ?
То есть зубчиками ...вся остальная реализация не интересует
Пробовал box-sizing:border-box/content-box/padding-box что то я упустил из вида - забыл