Weboldal készítés

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

2006-06-01

Ü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.

<!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.

#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.