Предположим, что я хочу отображать стрелку в CSS, которая должна иметь голову, хвост и гибкую ширину, чтобы он мог содержать текст. Я могу, конечно, создать несколько div, чтобы получить то, что я хочу, но как это можно сделать в CSS3?
Я могу использовать несколько фоновых изображений:
div.arrow{
background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}
html:
<div class="arrow">This text is on a transparent background</div>
Это дает мне div
с головой стрелки и хвостом и прозрачным средним сектором.
Не представляется возможным указать цвет в средней части.
Только с одним фоновым изображением вы можете сделать это:
div.arrow{ background: red url('some_image.png') no-repeat; }
Я знаю, что это выполнимо многими способами, но действительно ли свойство background-color действительно потеряно из сокращенного определения?