Как написать на чистом css рамку с «вырезом» для текста?

Question

[Ярослав Никитин]

Много раз пытался, но не получилось. Жду любые предложения. Критиковать о том, что я объяснять не умею, не обязательно :)

Answer 1

[Ярослав Никитин]

Если вдруг кому нужно, вот я сделал так, это самый простой способ, которым я смог сделать, но не универсальный.

css

.text_theme{
	font-size:10px;
	border-left: 100px solid #333333;
	border-right: 500px solid #333333;
	padding-left:20px;
	padding-right:20px;
}

.box_theme{
	border-left: 10px solid #333333;
	border-right: 10px solid #333333;
	border-bottom: 10px solid #333333;
	padding: 10px;
	width:100% - 20px;
}

html

<div class = "text_theme">ТЕКСТ</div>	
<div class = "box_theme">Содержимое</div>

Comments

[Юрий Лобанов]

Это далеко не самый простой способ, посмотрите предложенный мной.

[Ярослав Никитин]

@iiil самый простой способ, которым Я смог сделать.

[Юрий Лобанов]

@copyloc ага, присмотритесь к моему варианту.
Он проще и более гибкий, лучше поддержка, так как Вы используете вычисления в css, а fieldset был еще в html4

Answer 2

[Юрий Лобанов]

codepen.io/iiil/pen/BgKFj
Вот так это делается )

Comments

[zooks]

Точно, решение на чистом HTML "красивше" будет.

Answer 3

[zooks]

CSS для текста:

position: relative;
top:20px;
background-color: #000;

Comments

[Ярослав Никитин]

Это я догадался, но у всех же разные разрешения экранов, будет прыгать по экрану.

[Ярослав Никитин]

Или например, как сделать чтобы был отступ от блока в котором он находиться?

[Юрий Лобанов]

Это решение не подойдет для текстурного бэкграунда.

[Юрий Лобанов]

@Doomsday_nxt не несите чушь
codepen.io/iiil/pen/tkduj - тонкие рамки
codepen.io/iiil/pen/dCfLm - текстура и тонкие рамки

[Юрий Лобанов]

@Doomsday_nxt и я не вижу Вашего решения