CSS trükkök első rész – Háromszögek, sokszögek


Üdvözlök mindenkit!

Egy érdekes megoldást szeretnék bemutatni css segítségével, mellyel különböző alakzatokat tudunk létrehozni. Példánkban egy háromszöget fogunk szerkeszteni. Hozzunk létre egy HTML fájlt, amiben helyezzünk el két <div>-et egy harmadik <div>-ben.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
*ide írjuk majd a CSS-t*
</style>
</head>
<body>
 
<div id="alapdiv">
<div id="div1"></div>
<div id="div2"></div>
</div>
 
</body>
</html>

Ha ezzel megvagyunk, jöhet a CSS. Az alapdivnek fogunk beállítani szélességet és magasságot, valamint a háttérszínét is megadjuk. Példánkban lilát. De az igazán érdekes rész majd a div1 és div2 formázása lesz: 15 pixeles szegélyt kapnak, ám maguk a <div>-ek 0x0 pixelesek lesznek, tehát sem magasságuk, sem szélességük nem lesz. Továbbá a div1-et balra, a div2-őt jobbra igazítjuk. Sajnos azt is meg kell neki adni, hogy a scrollbart ne jelenítse meg, és ne is hagyjon ki
neki helyet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#alapdiv {
  background-color: purple;
  height: 600px;
  width: 800px;
  }
 
#div1 {
  border: 15px solid;
  border-color: white purple purple white;
  float: left;
  height: 0px,
  overflow: hidden;
  width: 0px;
  }
 
#div2 {
  border: 15px solid;
  border-color: white white purple purple;
  float: right;
  height: 0px,
  overflow: hidden;
  width: 0px;
  }

Az utóbbi kódot a HTML megfelelő részébe másoljuk be, majd mentsük el index.html néven. Nyissuk is meg a fájlt, és csodáljuk meg művünket. A lila terület felső két sarkában nem képek vannak, hanem két háromszög, vagyis a div1 és a div2. Természetesen ezt a trükköt még sok-sok egyéb helyen is fel tudjuk használni, sőt! Ha ügyesek vagyunk fenyőfát is tudunk “rajzolni”. Nem vicc! ;)

Csatoltam a kész fájlt, mely Valid XHTML 1.1-ben és CSS-ben egyaránt.

Kapcsolódó bejegyzések:
  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • Valid XHTML transitional doctype, Valid XHTML transitional sablon Az alábbi kódot amolyan segítség leginkább magamnak, hogy ne kelljen mindig megírnom az alapok …

  • Honlapkészítés során van olyan helyzet, hogy szeretnénk betölteni a lapon 1-1 olyan új szöveget, képet miegymást, hogy az ne járjon az egész oldal újratöltésével …

  • Néha jól jön, hogy egy lapon egyes tartalmakat alapértelmezetten el lehet rejteni a szemek elől (helyspórolás, átláthatóság stb..), persze nem véglegesen, csak á …

  • A CSS-ek elején szoktam ezt a kódot használni ahhoz, hogy minden böngésző alatt az egyébként másként megjelenített részeket azonos kinézetre formázzam.…

A cikket beküldte: BlackY ()

1 hozzászólás

  1. BREST says:

    Szia BlackY!

    Kipróbáltam ezt a jó kis css trükköt, de nekem nem egy szemmel jól kivehető háromszög jött ki egyik sarokban sem :(
    Nekem a háromszög talpa, ‘villám’ alakú :S
    Tudnál segíteni ??

Szólj hozzá
a CSS trükkök első rész – Háromszögek, sokszögek c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>