сss (9) сss3 (14) ajax (2) css (42) drupal (7) Fix IE6 (4) font (4) html (23) javascript (22) jQuery (15) js (5) less (1) php (1) scss (1) soft (2) vue (1) webstorm (1) wordpress (1)

Сглаженные углы на CSS (вариант №2)

Пример закругленных уголков без использования графики,
вариант использования значка • (•)
Идея стара как мир :) не знаю на сколько универсальная, но иногда можно пользоваться...
<div class="block"> <div class="tl"><span>&bull;</span></div> <div class="tr"><span>&bull;</span></div> <div class="bl"><span>&bull;</span></div> <div class="br"><span>&bull;</span></div> <div class="text"> TEXT</div> </div>
Всё как в варианте с рисунком, основной блок с класом block в ньом для каждого угла свой блок с класом (tl, tr, bl, br) с position:absolute; и растановкой по углам. Ну и блок с класом text для контента(текста, фоток)... Недостатки, есть конечно, но когда надо что-то простое вполне спасает... ИМХО: всё таки чаще пользуюсь рисунком (полупрозрачным пнг) для углов.