Tekstbox met ronde hoek

Tekstbox met ronde hoek


Tegenwoordig zie je op vee websites tekstboxen met ronde hoeken. Veelal zijn die met behulp
van plaatjes gemaakt, maar dat kan ook op een andere manier, zodat je die plaatjes niet nodig hebt.
Alleen maar door CSS goed te gebruiken. Voor de afgeronde hoeken maken we gebruik van bullets.

Het eerste wat je moet doen is een ‘div’ maken die gaat fungeren als tekstbox. In iedere hoek plaatsen
we vervolgens een kleinere ‘div’. In elk van deze hoeken plaatsen we een div met een groot bullet punt.
We gaan deze punten zo neerzetten dat er maar een kwart van die cirkel zichtbaar is. Laten we maar aan de
code beginnen.

<div class="box">
<div id="lb"><div id="lb-bullet">&bull;</div></div>
<div id="rb"><div id="rb-bullet">&bull;</div></div>
<div id="lo"><div id="lo-bullet">&bull;</div></div>
<div id="ro"><div id="ro-bullet">&bull;</div></div>
<div id="tekst">
<h4>Hier komt de tekst te staan</h4>
En wat je maar wilt kun je erin schrijven natuurlijk.
Experimenteer er eens mee.
</div>
</div>

Nu moeten we de stijl schrijven zodat we de juiste verschijning produceren.

.box {position: relative; width: 400px; height: 150px; margin: 5em auto; background: #F30; color: #000;}

/* Positie divs */
#lb, #rb, #lo, #ro {position: absolute; width: 20px; height: 20px; background: #FFF; color: #F30; overflow: hidden;}
#lb {top: 0px; left: 0px;}
#rb {top: 0px; left: 380px;}
#lo {top: 130px; left: 0px;}
#ro {top: 130px; left: 380px;}

/* Bullet divs */
#lb-bullet, #rb-bullet, #lo-bullet, #ro-bullet {position: absolute; font-size: 150px; font-family: arial; color: #F30; line-height: 40px;}
#lb-bullet {left: -8px;}
#rb-bullet {left:-25px;}
#lo-bullet {top: -17px; left: -8px;}
#ro-bullet {top: -17px; left: -25px;}

#content {position: absolute; top: 10px; left: 10px; width: 380px; height: 130px; color: #FFF; font-family: arial;}

het gebruik van het lettertype is wel van belang hier. We hebben in ons voorbeeld Arial gebruikt. Daarnaast moet je er rekening mee
houden dat de tekstbox statisch is en wanneer je het groter wilt zul je dus wat moeten veranderen aan height en width van .box en # content
en de top en left van de positie en bullet-divs.

          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *