Трапеция в CSS

336

one

3 мая 2016, 06:52

2372

Подскажите примером как оформить DIVно заголовок. В результате хочется вот такой вид получить http://joxi.ru/BA0Rv9jFB8DJjm

UPD

Существующий заголовок выглядит так.

<div><h1>Текст</h1></div>

Решения для автоматизации действий ( https://www.facebook.com/automationstudio20/ ) в интернете.

TA

116

TiA

3 мая 2016, 07:51

#1

Если вам нужно получить трапецию на CSS, то можно прописать такие стили:


h1 {
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	height: 0;
	width: 100px;
}

Ширина блока может быть любой, угол наклона определяется шириной border-ов, цвет фона - цветом нижней границы.

1

Профессиональная верстка и разработка сайтов на WordPress (http://www.maultalk.com/topic139110s0.html)

336

one

3 мая 2016, 08:06

#2

Один вопрос, как задать ширину по длине текста? Фиксированная ширина не подходит.

287

tommy-gung

3 мая 2016, 08:23

#3

display:inline-block;

1

Здесь не могла быть ваша реклама

336

one

3 мая 2016, 08:34

#4

tommy-gung:
display:inline-block;

Да, спасибо! Я правда наткнулся на display: table-row-group; - сработало. Не совсем уверен что решение правильное.