Как добавить собственные поля и контролировать их форму с помощью CSS?

Question

Я пытаюсь стилизовать h1, используя следующее изображение ...

В настоящее время мой код выглядит следующим образом ...

h1{
    background:#add2cb;
    padding:15px 20px;
    color:#387475;
font-size:16px;
font-weight:bold;
}

Но я хочуВаша помощь, чтобы добавить левую и правую нижнюю кривую, используя CSS.Я пробовал много способов, пожалуйста, помогите мне переписать CSS-код для достижения этой цели.спасибо.

Answer 1

Вы должны полностью проверить Версия Гарри Робертса , прелесть в том, что вам не потребуются дополнительные элементы, чтобы его снять.

http://csswizardry.com/2011/02/css-powered-ribbons-the-clean-way/

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

Answer 2

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

background: url("path/to.image") bottom center no-repeat;

Я не уверен, возможно ли заставить его работать с H1, которые имеют разные размеры, если вы не хотите использовать <div> s вместо.

С 1 'ы вы можете сделать это:

HTML:

<div class="heading"><span>Text Goes Here</span><div>

CSS:

.heading { background: url("left-curve-image.jpg") left center no-repeat #add2cb;
           padding:15px 20px;
           color:#387475;
           font-size:16px;
           font-weight:bold; }
.heading span { background: url("right-curve-image.jpg") right center no-repeat #add2cb; }

Просто обратите внимание, что вам понадобятся фрагменты левой и правой стороны кривой сверху вниз