Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Zaokrąglone rogi
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
henio
Właśnie nie wiem jak zrobić w tabeli zaokrąglone rogi. Szukałem na forum i znalazłem temat zamkniętny sprzed ponad 3 lat (więc już nie aktualny). Natmoast w internecie jest strona, ale płatna, więc tu postanowiłem napisać.

Jak bez użycia obrazków w tabeli zrobić zaokraglone rogi?
angel2953
Na CSS Play masz masę przykładów jak zrobić zaokrąglone rogi za pomocą CSS i bez obrazków.
henio
Są przykłady, ale jaki kod i dlaczego wstawić to już nie jest napisane.
angel2953
Cytat(henio @ 23.01.2007, 18:23:56 ) *
Są przykłady, ale jaki kod i dlaczego wstawić to już nie jest napisane.

a źródła strony to nie można zobaczyć bo zakodowane ?

  1. ...
  2. <style type="text/css">
  3.  
  4. .curvy {position:relative; width:250px; background:#9caf9c; color:#000; margin:5em auto;}
  5. #ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#9caf9c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
  6. #ctl {top:0; left:0;}
  7. #cbl {bottom:0; left:0;}
  8. #ctr {top:0; right:0;}
  9. #cbr {bottom:0; right:0;}
  10. .curvy em b {position:absolute; font-size:150px; font-family:arial; color:#9caf9c; line-height:40px; font-weight:normal;}
  11. #ctl b {left:-8px;}
  12. #ctr b {left:-25px;}
  13. #cbl b {left:-8px; top:-17px;}
  14. #cbr b {left:-25px; top:-17px;}
  15. .curvy p {position:relative; z-index:100; padding:5px 10px;}
  16.  
  17.  
  18. ...
  19.  
  20. <h2>Curved Corners</h2>
  21.  
  22. <div class="curvy">
  23. <em id="ctl"><b></b></em>
  24. <em id="cbl"><b></b></em>
  25. <em id="ctr"><b></b></em>
  26. <em id="cbr"><b></b></em>
  27. <p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
  28.  
  29. Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
  30. </div>
skowron-line
zaokraglone rogi
mogles poszukac temat ma nawet taka sama nazwe jak twoj
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.