[CSS] Zaokrąglone rogi bez używania obrazków
Ten wpis ma 17 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.
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
O autorze
