0

введите сюда описание изображения

На фотографии форма, а в форме сверху написано "ОКРОШКА МЯСНАЯ". Я не знаю, как сделать мне так же. Пробовал fieldset вместе с legend, не помогло.

2 ответа 2

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>

0

В стилях к тексту попробуй задать: text-decoration: line-through; Так же можешь поместить блок с текстом под блок с рамкой и задать отрицательный отступ

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.