HTML:
|
1 2 3 4 |
<div class="border-item"> <div class="border-head">Заголовок</div> <p>Описание блока</p> </div> |
Пример:
На первый взгляд блоки абсолютно одинаковые, но если фон под ними не однородный, то разница становится очевидной.
Заголовок
Описание блока
CSS:
Этот вариант первым приходит на ум, так как очень простой. В нем мы делаем рамку для блока, а на заголовок ставим фон и поднимаем его вверх.
Однако если у нас неоднородный фон, такой вариант не подойдет.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.border-item { position: relative; padding: 20px 30px 10px; border: 5px solid #337AB7; margin: 35px 30px 20px; border-radius: 15px; } .border-head { position: absolute; top: 0; left: 50%; padding: 0 15px; transform: translateX(-50%) translateY(-15px); font-size: 22px; line-height: 25px; font-weight: bold; text-transform: uppercase; color: #337AB7; background: #FFF; } |
Заголовок
Описание блока
CSS:
Данный вариант посложнее и поинтереснее, в нем заголовок является верхней частью блока, включая рамку.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
.border-item { position: relative; padding: 10px 30px; border-left: 5px solid #337AB7; border-bottom: 5px solid #337AB7; border-right: 5px solid #337AB7; border-radius: 0 0 15px 15px; margin: 50px 30px 20px; } .border-head { display: flex; position: absolute; align-items: flex-end; top: 0; left: 0; width: 100%; text-align: center; font-size: 22px; line-height: 25px; font-weight: bold; text-transform: uppercase; color: #337AB7; transform: translateY(-100%); } .border-head:before { content: ""; flex: 1; height: 15px; margin-right: 15px; border-top: 5px solid #337AB7; border-left: 5px solid #337AB7; border-radius: 15px 0; transform: translateX(-5px); } .border-head:after { content: ""; flex: 1; height: 15px; margin-left: 15px; border-top: 5px solid #337AB7; border-right: 5px solid #337AB7; border-radius: 0 15px; transform: translateX(5px); } |
Добавить комментарий: