tutweb/CSS Shapes Demo

## CSS Shapes Demo
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Demo CSS Shapes</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}

		body{
			background-color: #ddd;
			line-height: 1.5em;
		}
		.container{
			width: 720px;
			margin: 30px auto;
			background-color: #fff;
			padding: 50px;

		}

		.header{
			padding-bottom: 20px;
			margin: bottom: 20px;
		}

		.content p{
			margin-bottom: 40px;
		}

		.one img{
			float:left; margin-right: 20px; height:400px;
			shape-outside:  polygon(nonzero, 0px 0px, 191px 13px, 215px 84px, 196px 132px, 230px 170px, 337px 173px, 333px 226px, 272px 257px, 241px 358px, 212px 390px, 201px 409px, 0px 400px);
		}

		.two img{
			float: right;
			shape-outside:  polygon(nonzero, -13px 473px, -7px 443px, 26px 389px, 191px 382px, 227px 307px, 312px 198px, 320px 170px, 325px 95px, 313px 29px, 510px 0px, 510px 519px, 85px 501px);
		}
	</style>
</head>
<body>

	<div class="container">

		<div class="header">
			<h1>CSS Shapes TWD</h1>
			<p>Tutorial Web Design Indonesia - tutorial-webdesign.com</p>
			<p>&laquo; Back to article</p>
		</div>

		<div class="content">
			<p class="paragraph one">
				<img src="kid.png" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit distinctio rem aperiam expedita ea vitae a officiis impedit labore excepturi, nulla iure id adipisci laborum? Illo minima voluptatum fuga, hic, aperiam eius nesciunt quam, tempore asperiores quidem tempora veniam aliquid, dolorem facilis. Ex odio, esse odit eius! Quia officiis, vero in deleniti voluptatibus saepe blanditiis sit sequi mollitia incidunt nostrum temporibus optio odio nihil ut iure excepturi illum quae nam dolor consequatur omnis esse eos, ipsa. Fugiat necessitatibus cumque consequuntur perferendis saepe expedita reiciendis eveniet blanditiis aliquam illo cupiditate nemo repellat officiis, harum illum fugit maiores ipsum cum, repudiandae a temporibus eaque consectetur sed. Provident cumque consequuntur ab hic impedit distinctio harum accusamus fuga eaque quasi reiciendis nisi odit error ipsam esse, maiores quod expedita veritatis sunt illum commodi architecto non atque autem. Illo, ea voluptate doloribus. Tenetur rem quod iste sit mollitia laboriosam neque impedit, eligendi quam, nemo, unde ullam quibusdam. Totam odio maiores, ipsa fuga tenetur, iusto, numquam recusandae repudiandae quidem similique minus sapiente nobis qui dicta porro vitae. Tenetur sapiente, nihil corrupti iste impedit nisi sequi eveniet molestias iure.
			</p>
			<p class="paragraph two">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit distinctio rem aperiam expedita ea vitae a officiis impedit labore excepturi, nulla iure id adipisci laborum? Illo minima voluptatum fuga, hic, <img src="cat.png" alt=""> aperiam eius nesciunt quam, tempore asperiores quidem tempora veniam aliquid, dolorem facilis. Ex odio, esse odit eius! Quia officiis, vero in deleniti voluptatibus saepe blanditiis sit sequi mollitia incidunt nostrum temporibus optio odio nihil ut iure excepturi illum quae nam dolor consequatur omnis esse eos, ipsa. Fugiat necessitatibus cumque consequuntur perferendis saepe expedita reiciendis eveniet blanditiis aliquam illo cupiditate nemo repellat officiis,  harum illum fugit maiores ipsum cum, repudiandae a temporibus eaque consectetur sed. Provident cumque consequuntur ab hic impedit distinctio harum accusamus fuga eaque quasi reiciendis nisi odit error ipsam esse, maiores quod expedita veritatis sunt illum commodi architecto non atque autem. Illo, ea voluptate doloribus. Tenetur rem quod iste sit mollitia laboriosam neque impedit, eligendi quam, nemo, unde ullam quibusdam. Totam odio maiores, ipsa fuga tenetur, iusto, numquam recusandae repudiandae quidem similique minus sapiente nobis qui dicta porro vitae. Tenetur sapiente, nihil corrupti iste impedit nisi sequi eveniet molestias iure. Aperiam suscipit error expedita vero perferendis. A laudantium perferendis similique. Molestias consectetur itaque velit tempora. Expedita quo voluptatibus amet impedit necessitatibus, recusandae omnis maxime unde sequi quasi esse possimus laudantium, dolorem, accusantium! Velit quod recusandae, quam cupiditate quia architecto nesciunt doloremque mollitia quo minima minus, facilis fuga adipisci vero voluptatum perferendis vitae accusamus voluptas. Odit animi rerum sapiente minima harum alias a quaerat quod accusamus consectetur qui quasi nisi illum autem, voluptate ipsam accusantium quisquam cum hic cumque atque. Quos consequuntur dignissimos magni! Odio iusto iure autem ducimus optio. Quam, quia, nesciunt! Doloremque, possimus rerum corrupti voluptatibus. Rem quaerat ipsa beatae id quis quibusdam laudantium illum sequi minima, tempore, nemo adipisci ab at. Veniam, at veritatis cum nisi?
			</p>
		</div>

	</div>

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Demo CSS Shapes</title>
	<style>
	*{
	padding: 0;
	margin: 0;
	}

	body{
	background-color: #ddd;
	line-height: 1.5em;
	}
	.container{
	width: 720px;
	margin: 30px auto;
	background-color: #fff;
	padding: 50px;

	}

	.header{
	padding-bottom: 20px;
	margin: bottom: 20px;
	}

	.content p{
	margin-bottom: 40px;
	}

	.one img{
	float:left; margin-right: 20px; height:400px;
	shape-outside: polygon(nonzero, 0px 0px, 191px 13px, 215px 84px, 196px 132px, 230px 170px, 337px 173px, 333px 226px, 272px 257px, 241px 358px, 212px 390px, 201px 409px, 0px 400px);
	}

	.two img{
	float: right;
	shape-outside: polygon(nonzero, -13px 473px, -7px 443px, 26px 389px, 191px 382px, 227px 307px, 312px 198px, 320px 170px, 325px 95px, 313px 29px, 510px 0px, 510px 519px, 85px 501px);
	}
	</style>
	</head>
	<body>

	<div class="container">

	<div class="header">
	<h1>CSS Shapes TWD</h1>
	<p>Tutorial Web Design Indonesia - tutorial-webdesign.com</p>
	<p>« Back to article</p>
	</div>

	<div class="content">
	<p class="paragraph one">
	<img src="kid.png" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit distinctio rem aperiam expedita ea vitae a officiis impedit labore excepturi, nulla iure id adipisci laborum? Illo minima voluptatum fuga, hic, aperiam eius nesciunt quam, tempore asperiores quidem tempora veniam aliquid, dolorem facilis. Ex odio, esse odit eius! Quia officiis, vero in deleniti voluptatibus saepe blanditiis sit sequi mollitia incidunt nostrum temporibus optio odio nihil ut iure excepturi illum quae nam dolor consequatur omnis esse eos, ipsa. Fugiat necessitatibus cumque consequuntur perferendis saepe expedita reiciendis eveniet blanditiis aliquam illo cupiditate nemo repellat officiis, harum illum fugit maiores ipsum cum, repudiandae a temporibus eaque consectetur sed. Provident cumque consequuntur ab hic impedit distinctio harum accusamus fuga eaque quasi reiciendis nisi odit error ipsam esse, maiores quod expedita veritatis sunt illum commodi architecto non atque autem. Illo, ea voluptate doloribus. Tenetur rem quod iste sit mollitia laboriosam neque impedit, eligendi quam, nemo, unde ullam quibusdam. Totam odio maiores, ipsa fuga tenetur, iusto, numquam recusandae repudiandae quidem similique minus sapiente nobis qui dicta porro vitae. Tenetur sapiente, nihil corrupti iste impedit nisi sequi eveniet molestias iure.
	</p>
	<p class="paragraph two">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit distinctio rem aperiam expedita ea vitae a officiis impedit labore excepturi, nulla iure id adipisci laborum? Illo minima voluptatum fuga, hic, <img src="cat.png" alt=""> aperiam eius nesciunt quam, tempore asperiores quidem tempora veniam aliquid, dolorem facilis. Ex odio, esse odit eius! Quia officiis, vero in deleniti voluptatibus saepe blanditiis sit sequi mollitia incidunt nostrum temporibus optio odio nihil ut iure excepturi illum quae nam dolor consequatur omnis esse eos, ipsa. Fugiat necessitatibus cumque consequuntur perferendis saepe expedita reiciendis eveniet blanditiis aliquam illo cupiditate nemo repellat officiis, harum illum fugit maiores ipsum cum, repudiandae a temporibus eaque consectetur sed. Provident cumque consequuntur ab hic impedit distinctio harum accusamus fuga eaque quasi reiciendis nisi odit error ipsam esse, maiores quod expedita veritatis sunt illum commodi architecto non atque autem. Illo, ea voluptate doloribus. Tenetur rem quod iste sit mollitia laboriosam neque impedit, eligendi quam, nemo, unde ullam quibusdam. Totam odio maiores, ipsa fuga tenetur, iusto, numquam recusandae repudiandae quidem similique minus sapiente nobis qui dicta porro vitae. Tenetur sapiente, nihil corrupti iste impedit nisi sequi eveniet molestias iure. Aperiam suscipit error expedita vero perferendis. A laudantium perferendis similique. Molestias consectetur itaque velit tempora. Expedita quo voluptatibus amet impedit necessitatibus, recusandae omnis maxime unde sequi quasi esse possimus laudantium, dolorem, accusantium! Velit quod recusandae, quam cupiditate quia architecto nesciunt doloremque mollitia quo minima minus, facilis fuga adipisci vero voluptatum perferendis vitae accusamus voluptas. Odit animi rerum sapiente minima harum alias a quaerat quod accusamus consectetur qui quasi nisi illum autem, voluptate ipsam accusantium quisquam cum hic cumque atque. Quos consequuntur dignissimos magni! Odio iusto iure autem ducimus optio. Quam, quia, nesciunt! Doloremque, possimus rerum corrupti voluptatibus. Rem quaerat ipsa beatae id quis quibusdam laudantium illum sequi minima, tempore, nemo adipisci ab at. Veniam, at veritatis cum nisi?
	</p>
	</div>

	</div>

	</body>
	</html>