Bu dersimizde CSS3’ün shape-outside özelliğini kullanarak metnimizi resmimize göre şekillendireceğiz. Hemen index.html sayfamızı oluşturuyoruz ve içine aşağıdaki kodu yazıyoruz.

<div>
		<img src="http://googledrive.com/host/0B6BQOnCe69f9SU1WcXNEb1k3SUE/rabbit-shape.png" alt="Tavşan" />
	</div>
	
	<p>
		Alice is feeling bored and drowsy while sitting on the riverbank with her elder sister. She then notices a talking, clothed White Rabbit with a pocket watch run past. She follows it down a rabbit hole when suddenly she falls a long way to a curious hall
    with many locked doors of all sizes. She finds a small key to a door too small for her to fit through, but through it she sees an attractive garden. She then discovers a bottle on a table labelled "DRINK ME," the contents of which cause her to shrink
    too small to reach the key which she has left on the table. She eats a cake with "EAT ME" written on it in currants as the chapter closes. Alice is feeling bored and drowsy while sitting on the riverbank with her elder sister. She then notices a talking,
    clothed White Rabbit with a pocket watch run past. She follows it down a rabbit hole when suddenly she falls a long way to a curious hall with many locked doors of all sizes. She finds a small key to a door too small for her to fit through, but through
    it she sees an attractive garden. She then discovers a bottle on a table labelled "DRINK ME," the contents of which cause her to shrink too small to reach the key which she has left on the table. She eats a cake with "EAT ME" written on it in currants
    as the chapter closes. Alice is feeling bored and drowsy while sitting on the riverbank with her elder sister. She then notices a talking, clothed White Rabbit with a pocket watch run past. She follows it down a rabbit hole when suddenly she falls
    a long way to a curious hall with many locked doors of all sizes. She finds a small key to a door too small for her to fit through, but through it she sees an attractive garden. She then discovers a bottle on a table labelled "DRINK ME," the contents
    of which cause her to shrink too small to reach the key which she has left on the table. She eats a cake with "EAT ME" written on it in currants as the chapter closes.
	</p>

daha sonra css dosyamıza ise

img {
	width:300px;
	height:300px;
	float:left;
	shape-outside:circle(50%);
}

kodunu ekliyoruz ve işlemimiz tamamdır örneği aşağıdaki pencereden görebilirsiniz.

See the Pen xGPNyy by Uğur (@ugurturkmen) on CodePen.