Добрый день, уважаемые форумчане.
Делаю так называемый призыв к "действию"
Логика такая есть один див на всю ширину экрана
В нём 5 дивов в строку
Один див с надписью (размеры надписи могут меняться), затем div-треугольник. потом сам "призыв" (мол позвоните нам), затем снова div-треугольник и завершает цепочку пустой див
У первого дива размер может меняться, div-треугольники имеют фиксированный размер, "призыв" имеет размер 50%, а пустой див должен быть на остальной размер, вот именно эту задачу я и не могу решить...
Код ниже
<div style="display: table; width: 100%;">
<div style="float: left; height: 100px; background: #EA344D; font-size: 24px; color: #FFF; font-family: PFBeauSansPro-Regular; text-align:center;">
<div style="padding:20px;">
Воспользуйтесь<br>сейчас
</div>
</div>
<div style="float: left; border: 50px solid transparent; border-left: 50px solid #EA344D; border-top: 50px solid #EA344D; width:0; height:0; ">
</div>
<div style = "float: left; text-align:center;" >
<div style="padding:20px;">
<p>Консультации по телефону</p>
<span style="font-size: 22px; top: 6px; margin-right: 5px; font-family: PFBeauSansPro-Light; color: #5B5B5B;"> (0000)</span>
<span style="font-size: 30px; font-family: PFBeauSansPro-Light; color: #5B5B5B;">000-000</span><br />
<a href="" style="border-bottom: 1px dashed #000; color: #5B5B5B;" class="callcons_b" onClick="return false;">заказать звонок</a>
</div>
</div>
<!--Тут блоки див я поменял местами, что бы был отступ по правому краю-->
<div style="float: right; width: 100px; height: 100px; background: #EA344D;">
</div>
<div style="float: right; border: 50px solid transparent; border-right: 50px solid #EA344D; border-bottom: 50px solid #EA344D; width:0;height:0">
</div>
</div>
P.S. Не знаю как сделать кнопку "Запустить код"