На фотографии форма, а в форме сверху написано "ОКРОШКА МЯСНАЯ". Я не знаю, как сделать мне так же. Пробовал fieldset вместе с legend, не помогло.
2 ответа
body {background: #999;}
.fieldset {
display: block;
width: 300px;
height: 150px;
margin-top: 2em;
border: 2px solid #fff;
position: relative;
}
.fieldset .legend {
display: block;
font-size: 150%;
line-height: 1;
white-space: nowrap;
font-weight: bold;
color: #fff;
text-transform: uppercase;
position: absolute;
left: 1em;
top: 0;
transform: translateY(-50%);
}
<div class="fieldset">
<div class="legend">Окрошка мясная</div>
</div>
Если цвет бордера и текста одинаковый, то уже создаётся ощущение "перечёркнутого текста".
Если же цвет будет разный, то примените для .legend
правило z-index: -1
, тогда текст будет перечёркнут бордером.
body {background: #999;}
.fieldset {
display: block;
width: 300px;
height: 150px;
margin-top: 2em;
border: 2px solid #fff;
position: relative;
}
.fieldset .legend {
display: block;
font-size: 150%;
line-height: 1;
white-space: nowrap;
font-weight: bold;
color: #333;
text-transform: uppercase;
position: absolute;
left: 1em;
top: 0;
transform: translateY(-50%);
z-index: -1;
}
<div class="fieldset">
<div class="legend">Окрошка мясная</div>
</div>
В стилях к тексту попробуй задать: text-decoration: line-through; Так же можешь поместить блок с текстом под блок с рамкой и задать отрицательный отступ