CSSPLAY

CSS DEMOS › Shapes Inside and Outside

Date : 10th August 2015

For all modern browsers except IE and Firefox

1 CLASSIC LIMESTONEA soft peach-grey limestone, shaded 2 TUMBLE LIMESTONEA lived in feel with soft, neutral colours 3 RIVEN SANDSTONEOffering subtle hues of light to grey 4 FLAME GRANITEIdeal for external non-slip areas

Laying Flag Stones

There are two acceptable methods of laying flags - individual bedded and screed bedded. There is a third method, spot-bedding, but this is not considered suitable for a professional paving project. The choice of laying methods depends on the personal preference of the contractor or specifier, the type of bedding that is chosen, and the types of flags being used.

When stone flags are laid to town centre footpaths and other areas that are open to the general public, the rigid laying method is used increasingly. While this method is not radically different to the above methods, it is important enought to warrant its own section where the methodology can be illustrated in more detail.

Information

Following on from my previous demo, this one shows how you can get absolutely positioned shapes that emulate 'shape-inside' which is not yet supported by any browser. It also shows how these shapes can be positioned in a further shape which has a shape outside polygon which has the outer text follow the diamond shape of the outside container.

So four diamonds with text inside, absolutely positioned in a fifth diamond with outer text following this shape.

HTML Code

<div class="outer">
	<div class="wrapper">
		<a href="#w" class="container p1">
			<img class="right" src="inside-out/diamond-blank.png">
			<img class="left" src="inside-out/diamond-blank.png">
			<span>1 CLASSIC LIMESTONE</span>A soft peach-grey limestone, shaded
		</a>
		<a href="#x" class="container p2">
			<img class="right" src="inside-out/diamond-blank.png">
			<img class="left" src="inside-out/diamond-blank.png">
			<span>2 TUMBLE LIMESTONE</span>A lived in feel with soft, neutral colours
		</a>
		<a href="#y" class="container p3">
			<img class="right" src="inside-out/diamond-blank.png">
			<img class="left" src="inside-out/diamond-blank.png">
			<span>3 RIVEN SANDSTONE</span>Offering subtle hues of light to grey
		</a>
		<a href="#z" class="container p4">
			<img class="right" src="inside-out/diamond-blank.png">
			<img class="left" src="inside-out/diamond-blank.png">
			<span>4 FLAME  GRANITE</span>Ideal for external non-slip areas
		</a>
	</div>
	<h3>Laying Flag Stones</h3>
	<p>There are two acceptable methods of laying flags - individual bedded and screed bedded. There is a third method, spot-bedding, but this is not considered suitable for a professional paving project. The choice of laying methods depends on the personal preference of the contractor or specifier, the type of bedding that is chosen, and the types of flags being used.</p>
	<p>When stone flags are laid to town centre footpaths and other areas that are open to the general public, the rigid laying method is used increasingly. While this method is not radically different to the above methods, it is important enought to warrant its own section where the methodology can be illustrated in more detail. </p>
</div>

Cascading Style Sheet

.outer {
width:600px; 
	margin:50px 0;
}
.wrapper {
	position:relative; 
	width:314px; 
	height:304px; 
	float:left;
	-webkit-shape-outside: polygon(162px 0, 314px 152px, 162px 304px);
	shape-outside: polygon(162px 0, 314px 152px, 162px 304px);
}
.container {
	display:block; 
	overflow:hidden; 
	position:absolute; 
	cursor:pointer; 
	text-decoration:none; 
	color:#000; 
	text-align:center; 
	font:normal 13px/16px arial, sans-serif;
	width:150px; height:150px;
	-webkit-shape-outside: polygon(75px 0, 150px 75px, 75px 150px, 0 75px);
	-webkit-clip-path: polygon(75px 0, 150px 75px, 75px 150px, 0 75px);
	-webkit-shape-margin: 10px;
	-webkit-transition:1s;
	shape-outside: polygon(75px 0, 150px 75px, 75px 150px, 0 75px);
	clip-path: polygon(75px 0, 150px 75px, 75px 150px, 0 75px);
	shape-margin: 10px;
	transition:1s;
}
.container span {
	display:block; 
	font-weight:bold; 
	padding-bottom:5px;
}
.container span:first-letter {
	font-size:18px;
	line-height:30px;
}
.p1 {
	left:77px; 
	top:0; 
	background:#bbb url(inside-out/classic.jpg) no-repeat 0 140px;
}
.p2 {
	left:0; 
	top:77px; 
	background:#ccc url(inside-out/tumbled.jpg) no-repeat 140px 0;
}
.p3 {
	right:10px; 
	top:77px; 
	background:#ccc url(inside-out/riven.jpg) no-repeat -140px 0;
}
.p4 {
	left:77px; 
	bottom:0; 
	background:#ddd url(inside-out/flamed.jpg) no-repeat 0 -140px;
}
.left {
	width: 75px;
	float: left;
	-webkit-shape-outside: url("inside-out/diamond-left.png");
	-webkit-shape-margin: 3px;
	shape-outside: url("inside-out/diamond-left.png");
	shape-margin: 3px;
}
.right {
	width: 75px;
	float: right;
	-webkit-shape-outside: url("inside-out/diamond-right.png");
	-webkit-shape-margin: 3px;
	shape-outside: url("inside-out/diamond-right.png");
	shape-margin: 3px;
}
.container:hover {
	background-position:0 0; color:transparent;
}

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSS PLAY.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced.
Please email me for more information.