Skip to content

Instantly share code, notes, and snippets.

@electricg

electricg/index.html

Created November 5, 2014 03:19
Show Gist options
  • Save electricg/590fe34ea44411331c43 to your computer and use it in GitHub Desktop.
Save electricg/590fe34ea44411331c43 to your computer and use it in GitHub Desktop.
Download ZIP
css clip-path // source http://jsbin.com/quqewi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css clip-path</title>
<style id="jsbin-css">
/* just to emulate the real environment */
body {
background: url(http://2014.ffconf.org/images/case.png) white;
margin: 10px;
}
.photo {
height: 48px;
width: 48px;
}
.tweet {
padding: 10px;
margin-bottom: 10px;
background: rgba(0, 0, 0, 0.03);
border-radius: 10px;
}
/* actual css to use */
.tweet img.photo {
-webkit-clip-path: polygon(0% 22.85714%, 11.42857% 22.85714%, 11.42857% 11.42857%, 22.85714% 11.42857%, 22.85714% 0%, 100% 0%, 100% 77.14286%, 88.57143% 77.14286%, 88.57143% 88.57143%, 77.14286% 88.57143%, 77.14286% 100%, 0% 100%);
clip-path: polygon(0% 22.85714%, 11.42857% 22.85714%, 11.42857% 11.42857%, 22.85714% 11.42857%, 22.85714% 0%, 100% 0%, 100% 77.14286%, 88.57143% 77.14286%, 88.57143% 88.57143%, 77.14286% 88.57143%, 77.14286% 100%, 0% 100%);
border: 0 none;
border-radius: 0;
margin-left: 3px;
margin-top: 3px;
height: 42px;
width: 42px;
}
.tweet:after {
-webkit-clip-path: polygon(0% 20%, 10% 20%, 10% 10%, 20% 10%, 20% 0%, 100% 0%, 100% 80%, 90% 80%, 90% 90%, 80% 90%, 80% 100%, 0% 100%);
clip-path: polygon(0% 20%, 10% 20%, 10% 10%, 20% 10%, 20% 0%, 100% 0%, 100% 80%, 90% 80%, 90% 90%, 80% 90%, 80% 100%, 0% 100%);
background: rgba(0, 0, 0, 0.2);
content: '';
display: block;
position: absolute;
z-index: -1;
left: 10px;
top: 10px;
height: 48px;
width: 48px;
margin-left: 0;
margin-top: 0;
}
.tweet {
position: relative;
}
</style>
</head>
<body>
css clip-path ffconf generator
<div class="tweet">
<img class="photo" src="http://lorempixel.com/output/nature-q-c-480-480-2.jpg" alt="">
</div>
<script id="jsbin-source-css" type="text/css">/* just to emulate the real environment */
body {
background: url(http://2014.ffconf.org/images/case.png) #fff;
margin: 10px;
}
.photo {
height: 48px;
width: 48px;
}
.tweet {
padding: 10px;
margin-bottom: 10px;
background: rgba(0,0,0,0.03);
border-radius: 10px;
}
// function to create the clip-path
@function clip($square, $step) {
$c: ();
@for $i from 0 to $square {
@for $m from 0 to 2 {
$a: ($i + $m) * $step * 1% ($square - $i) * $step * 1%;
$c: append($c, $a, comma);
}
}
$a: $square * $step * 1% 0%;
$c: append($c, $a, comma);
$a: 100% 0%;
$c: append($c, $a, comma);
@for $i from 0 to $square {
@for $m from 0 to 2 {
$a: 100 - (($i + $m) * $step) * 1% 100 - ($square - $i) * $step * 1%;
$c: append($c, $a, comma);
}
}
$a: 100 - $square * $step * 1% 100%;
$c: append($c, $a, comma);
$a: 0% 100%;
$c: append($c, $a, comma);
@return $c;
}
$border-size: 3px;
$img-size: 48px;
$step: 10; // size of the squares, in % proportional to the img size
$square: 2; // squares we "bite" in the corners
$inside: true; // if true, border + img size = original img size, else border size is added outside img
$new-pos: 0;
$new-size: 0;
$new-step: 0;
$new-img-size: 0;
@if $inside == false {
$new-pos: $border-size * -1;
$new-size: $img-size + $border-size * 2;
$new-step: $img-size / $step * 100 / $new-size;
}
@else {
$new-step: $step;
$new-size: $img-size;
$new-img-size: $img-size - $border-size * 2;
$step: $img-size / $step * 100 / $new-img-size;
}
/* actual css to use */
.tweet img.photo {
$clip: clip($square, $step);
-webkit-clip-path: polygon($clip);
clip-path: polygon($clip);
border: 0 none;
border-radius: 0;
@if $inside == true {
margin-left: $border-size;
margin-top: $border-size;
height: $new-img-size;
width: $new-img-size;
}
}
.tweet:after {
$clip: clip($square, $new-step);
-webkit-clip-path: polygon($clip);
clip-path: polygon($clip);
background: rgba(0,0,0,0.2);
content: '';
display: block;
position: absolute;
z-index: -1;
left: 10px; // .tweet padding
top: 10px; // .tweet padding
height: $new-size;
width: $new-size;
margin-left: $new-pos;
margin-top: $new-pos;
}
.tweet {
position: relative;
}</script>
</body>
</html>
Raw
jsbin.quqewi.css
/* just to emulate the real environment */
body {
background: url(http://2014.ffconf.org/images/case.png) white;
margin: 10px;
}
.photo {
height: 48px;
width: 48px;
}
.tweet {
padding: 10px;
margin-bottom: 10px;
background: rgba(0, 0, 0, 0.03);
border-radius: 10px;
}
/* actual css to use */
.tweet img.photo {
-webkit-clip-path: polygon(0% 22.85714%, 11.42857% 22.85714%, 11.42857% 11.42857%, 22.85714% 11.42857%, 22.85714% 0%, 100% 0%, 100% 77.14286%, 88.57143% 77.14286%, 88.57143% 88.57143%, 77.14286% 88.57143%, 77.14286% 100%, 0% 100%);
clip-path: polygon(0% 22.85714%, 11.42857% 22.85714%, 11.42857% 11.42857%, 22.85714% 11.42857%, 22.85714% 0%, 100% 0%, 100% 77.14286%, 88.57143% 77.14286%, 88.57143% 88.57143%, 77.14286% 88.57143%, 77.14286% 100%, 0% 100%);
border: 0 none;
border-radius: 0;
margin-left: 3px;
margin-top: 3px;
height: 42px;
width: 42px;
}
.tweet:after {
-webkit-clip-path: polygon(0% 20%, 10% 20%, 10% 10%, 20% 10%, 20% 0%, 100% 0%, 100% 80%, 90% 80%, 90% 90%, 80% 90%, 80% 100%, 0% 100%);
clip-path: polygon(0% 20%, 10% 20%, 10% 10%, 20% 10%, 20% 0%, 100% 0%, 100% 80%, 90% 80%, 90% 90%, 80% 90%, 80% 100%, 0% 100%);
background: rgba(0, 0, 0, 0.2);
content: '';
display: block;
position: absolute;
z-index: -1;
left: 10px;
top: 10px;
height: 48px;
width: 48px;
margin-left: 0;
margin-top: 0;
}
.tweet {
position: relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment