Skip to content

Instantly share code, notes, and snippets.

Sergiu sergiu-radu

Block or report user

Report or block sergiu-radu

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@sergiu-radu
sergiu-radu / gist:197e6387191763dc2162d6cb5e2b525b
Created Jun 29, 2018 — forked from ayamflow/gist:b602ab436ac9f05660d9c15190f4fd7b
Safari border-radius + overflow: hidden + CSS transform fix
View gist:197e6387191763dc2162d6cb5e2b525b
// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);
@sergiu-radu
sergiu-radu / styles.scss
Created Feb 20, 2017
Creative Dissection Puzzles with CSS and SVG
View styles.scss
/* Fallback for Internet Explorer and Edge */
.ie-edge {
.clip {
// Hiding all pieces
display: none;
// Show the first piece without transforms
&:first-child {
@sergiu-radu
sergiu-radu / script.js
Created Feb 20, 2017
Creative Dissection Puzzles with CSS and SVG
View script.js
// From: http://stackoverflow.com/a/33152824/4908989
// Detect IE8+ and Edge
if (document.documentMode || /Edge/.test(navigator.userAgent)) {
document.body.className = 'ie-edge';
}
@sergiu-radu
sergiu-radu / styles.scss
Created Feb 20, 2017
Creative Dissection Puzzles with CSS and SVG
View styles.scss
$octagon-transform: (
translate(-135px, 0px) rotate(110.5deg),
translate(0px, 135px) rotate(110.5deg),
translate(135px, 0px) rotate(110.5deg),
translate(0px, -135px) rotate(110.5deg),
translate(0px, 0px) rotate(41deg),
);
@sergiu-radu
sergiu-radu / styles.scss
Created Feb 20, 2017
Creative Dissection Puzzles with CSS and SVG
View styles.scss
$figures: (
('pentagon', $pentagon-transform, '../img/face-1.jpg'),
('hexagon', $hexagon-transform, '../img/face-2.jpg'),
('octagon', $octagon-transform, '../img/face-3.jpg'),
);
@each $figure in $figures {
$name: nth($figure, 1);
$transform: nth($figure, 2);
$image: nth($figure, 3);
@sergiu-radu
sergiu-radu / styles.scss
Created Feb 20, 2017
Creative Dissection Puzzles with CSS and SVG
View styles.scss
/* Basic styles for pieces */
.clip-container {
position: relative;
width: 300px;
height: 300px;
display: inline-block;
background-color: rgba(0, 0, 0, 0.1);
overflow: hidden;
}
@sergiu-radu
sergiu-radu / index.html
Created Feb 20, 2017
Creative Dissection Puzzles with CSS and SVG
View index.html
<h2 class="team-header">Awesome Team</h2>
<div class="team-member">
<div class="clip-container clip-pentagon">
<div class="clip"></div>
<div class="clip"></div>
<div class="clip"></div>
<div class="clip"></div>
<div class="clip"></div>
<div class="clip"></div>
@sergiu-radu
sergiu-radu / index.html
Last active Feb 20, 2017
Creative Dissection Puzzles with CSS and SVG
View index.html
<!-- SVG elements don't need to be visible, so we need `width="0" height="0"` as we can't set `display: none` -->
<svg width="0" height="0">
<!-- clipPath elements go inside the defs -->
<defs>
<!-- Pentagon-to-square puzzle pieces -->
<clipPath id="pentagon-1"><path d="m65,235h111.19c-37.07-26.81-74.13-53.62-111.19-80.44v80.44z"/></clipPath>
<clipPath id="pentagon-2"><path d="m155.25,214.72c9.6313,6.55,18.732,14.721,28.688,20.281h51.062v-80.469c-26.583,20.062-53.167,40.125-79.75,60.188z"/></clipPath>
<clipPath id="pentagon-3"><path d="m151.84,212.25c19.604-14.792,39.208-29.583,58.812-44.375h-120.22c20.469,14.792,40.938,29.583,61.406,44.375z"/></clipPath>
<clipPath id="pentagon-4"><path d="m65,149.59c6.0625,4.3542,12.125,8.7083,18.188,13.062,10.604-32.55,21.212-65.098,31.812-97.65h-50v84.594z"/></clipPath>
<clipPath id="pentagon-5"><path d="m86.875,163.88h123.44c-33.125-24.5-66.25-49-99.375-73.5-8.0208,24.5-16.042,49-24.062,73.5z"/></clipPath>
You can’t perform that action at this time.