chevron-left chevron-right

[CSS] Zaokrąglone rogi bez używania obrazków

Aby uzyskać efekt zaokrąglonych rogów w danym elemencie strony, nie używając obrazków, można wykorzystać poniższy kod CSS:

.rog1, .rog2, .rog3, .rog4, .rog22, .rog32, .rog42{font-size:1px; overflow:hidden; display:block;}
.rog1 {height:1px; background:#aaa; margin:0 5px;}
.rog2, .rog22 {height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;}
.rog3, .rog32 {height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;}
.rog4, .rog42 {height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;}
.rog22, .rog32, .rog42 {background: #ddd;}
.headh {background: #aaa; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.headh h3 {margin: 0px 10px 0px 10px; padding-bottom: 3px;}
.contenth {background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa;}
.contenth div {margin-left: 12px; padding-top: 5px;}

A następnie kodowanie w pliku HTML dla danego elementu:

<b class="rog1"></b><b class="rog2"></b><b class="rog3"></b><b class="rog4"></b>
<div class="headh">
<h3>Tekst na górze</h3>
</div>
<div class="contenth">
<div>Tekst na dole</div>
</div>
 
<b class="rog42"></b><b class="rog32"></b><b class="rog22"></b><b class="rog1"></b>

Tutaj znajduje się demo z tego artykułu: ZAOKRAGLONE ROGI - DEMO

  • zdenek

    mogłeś pokazać efekt końcowy jak to wygląda

  • wstawiłem demo z tego artykułu 🙂

  • Mariusz

    Denerwują mnie takie porady typu, a następnie kodowanie w pliku html dla danego elementu. Nigdzie nie mam pliku html w joomla, mam tylko php, xml, i css. Plików css jest conajmniej kilka i skąd mam wiedzieć do którego wkleić kod? Jeśli już udzielasz porad, to bierz pod uwagę, że amatorzy też mogą czytać Twój blog.

    Porady typu wklejasz i gotowe są nieskuteczne w moim przypadku, tylko nie odsyłaj mnie do zgłębienia wiedzy o hatml i joomla, bo robię to sukcesywnie i myślałem, że z Twojej strony też się czegoś dowiem, ale widzę, że za wysokie progi.

  • Zaskakuje mnie Twój post. W tej poradzie nie poruszałem tematu Joomla!
    Ponadto, jeżeli chcesz zastosować tą metodę w systemie CMS Joomla! to musisz wiedzieć jak się tworzy szablony do tego systemu.
    Jeśli już znasz podstawy to bez najmniejszego problemu powinieneś sobie dać radę.

    Taka mała podpowiedź:
    Szablony dla Joomla! szukaj w folderze templates/ na serwerze i w nich najczęściej edytujesz plik o nazwie template.css

  • Marcin

    Mariusz polecam dodatek do firefoxa zwany firebug, gdzie możesz sprawdzić jaki dany element strony ma styl i w jakim pliku dany atrybut css się znajduje.

  • mm

    @Mariusz: ten artykuł jest bardzo dobry.
    To, że nie rozumiesz i nie chcesz się dowiedzieć jak działa joomla nie jest winą autora.

  • Mihau

    Ciekawy pomysł 🙂
    dosc prymitywny ale jednak zaskakujący 🙂

    „Mariusz” – no niezły z Ciebie kozak
    czytanie ze zrozumieniem się kłania 🙂

  • e? ten kod wygląda jakby był robiony pod IE6. Nie lepiej po prostu użyć „border-radius” (i specyficznych dla FF i Safari „-moz-border-radius” i „-webkit-border-radius”) na divie niż rysować tak rogi ręcznie?

  • blues

    kolego F055 „border-radius” nie jest interpretowane przez IE, a to to wciąż jedna z najpopularniejszych przeglądarek, wiec warto o niej pomysleć; choć nie wiem jak pod IE9…