Alakzatok készítése szegélyekkel

A szegélyek segítségével lehetőség nyílik szabályos és szabálytalan geometriai alakzatok készítésére csupán css stílusdeklarációk felhasználásával.

A HTML elem háttérszínét és a keret színét azonosra állítjuk, így maga a keret „láthatatlanná” válik.

Példa:

Forráskód


<style>
    div  {border:1px solid green;
          background-color: green; 
          color:#ffffff;
          width: 150px; height: 100px; 
          padding: 8px; 
          text-align:center;}  
    #id_0 {border-radius: 50%; width: 100px;}   
    #id_1 {border-radius: 50%; }   
    #id_2 {border-radius: 100px;  }  
    #id_3 {border-radius: 50px 50px 50px 0;}   
    #id_4 {border-radius: 100px 0 100px 0;}  
</style>     
...
<body>    
   <div id="id_0"><p> Kör</p></div>    
   <div id="id_1"><p> Ellipszis</p></div>
   <div id="id_2"><p> Két oldalt félkör</p></div>
   <div id="id_3"><p> Infő buborék</p></div>   
   <div id="id_4"><p> Falevél</p></div>
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_szegely_alakzatok_1.html