A portrait that text wraps around in an arc instead of a rectangle, using CSS shape-outside: round, slanted or plain straight for comparison. For team pages, interviews and articles with a photo in the text. On narrow screens the photo shrinks; without support the text simply runs straight alongside.
Sanne behandelt bij Fysio Oost in Groningen vooral knie- en schouderklachten. Ze begon als sportverzorger bij een handbalclub en weet dus hoe het is om snel terug te willen. Op dinsdag en donderdag houdt ze een avondspreekuur tot 20.00 uur, voor wie overdag werkt. Nieuwe patiënten kunnen zonder verwijzing van de huisarts bij haar terecht, de eerste afspraak duurt 45 minuten.
<!-- Tekst stroomt om een vorm · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tov">
<fieldset class="tov__opts">
<legend class="tov__sr">Vorm waar de tekst omheen loopt</legend>
<label class="tov__opt"><input class="tov__r" type="radio" name="tov-vorm" value="rond" checked><span>Rond</span></label>
<label class="tov__opt"><input class="tov__r" type="radio" name="tov-vorm" value="schuin"><span>Schuin</span></label>
<label class="tov__opt"><input class="tov__r" type="radio" name="tov-vorm" value="recht"><span>Recht</span></label>
</fieldset>
<article class="tov__art">
<img class="tov__img" src="https://neddev.com/lab-media/tekst-om-vorm-1.webp" alt="Fysiotherapeut Sanne Bakker in de oefenzaal van de praktijk" width="300" height="300" loading="lazy">
<h3 class="tov__h">Sanne Bakker, fysiotherapeut</h3>
<p class="tov__p">Sanne behandelt bij Fysio Oost in Groningen vooral knie- en schouderklachten. Ze begon als sportverzorger bij een handbalclub<span class="tov__y"> en weet dus hoe het is om snel terug te willen</span>.<span class="tov__x"> Op dinsdag en donderdag houdt ze een avondspreekuur tot 20.00 uur, voor wie overdag werkt. Nieuwe patiënten kunnen zonder verwijzing van de huisarts bij haar terecht, de eerste afspraak duurt 45 minuten.</span></p>
</article>
</div>
</div>/* Tekst stroomt om een vorm · NedDev · eigen werk. */
.tov{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:12px 18px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#fff;text-align:left;overflow:hidden}
.tov__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tov__opts{display:flex;gap:6px;margin:0;padding:0;border:0;min-width:0}
.tov__opt{position:relative;display:inline-flex}
.tov__r{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tov__opt span{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid rgba(10,10,10,.2);border-radius:4px;font-size:12.5px;font-weight:500;color:#3a3a3a}
.tov__r:checked+span{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.tov__r:hover+span{border-color:#0a0a0a}
.tov__r:focus-visible+span{outline:2px solid #F5480F;outline-offset:2px}
.tov{container-type:inline-size}
@container (max-width:380px){.tov__x{display:none}.tov__p{font-size:12px;line-height:1.45}}
@container (max-width:330px){.tov__y{display:none}.tov .tov__img{width:84px;height:84px;margin-right:8px}.tov .tov__h{font-size:13px}}
.tov__art{flex:1;min-height:0;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
.tov__img{float:left;width:128px;height:128px;margin:2px 12px 0 0;object-fit:cover;border-radius:50%;shape-outside:circle(50%);shape-margin:8px;transition:border-radius .35s ease,clip-path .35s ease}
.tov__h{margin:0 0 4px;font-size:14px;font-weight:700;line-height:1.25}
.tov__p{margin:0;font-size:12.5px;line-height:1.5;color:#2b2b2b}
.tov:has(.tov__r[value="schuin"]:checked) .tov__img{border-radius:4px;clip-path:polygon(0 0,100% 0,62% 100%,0 100%);shape-outside:polygon(0 0,100% 0,62% 100%,0 100%);height:132px}
.tov:has(.tov__r[value="recht"]:checked) .tov__img{border-radius:4px;shape-outside:none}
@media (max-width:420px){.tov__img{width:96px;height:96px}.tov:has(.tov__r[value="schuin"]:checked) .tov__img{height:110px}}
@media (prefers-reduced-motion:reduce){.tov__img{transition:none}}Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →