csssecrets

/**
 * Flexible ellipse
 */

div {
	width: 16em;
	height: 10em;
	background: #fb3;
	border-radius: 50%;
}

csssecrets

/**
 * Flexible half ellipse
 */

div {
	display: inline-block;
	width: 16em;
	height: 10em;
	margin: 1em;
	background: #fb3;

csssecrets

/**
 * Flexible quarter ellipse
 */

div {
	display: inline-block;
	width: 16em;
	height: 10em;
	margin: 1em;
	background: #fb3;

csssecrets

/**
 * Parallelograms — with extra HTML element
 */
 
.button { transform: skewX(45deg); }
.button > div { transform: skewX(-45deg); }

.button {
	display: inline-block;
	padding: .5em 1em;

csssecrets

/**
 * Parallelograms — with pseudoelements
 */

.button {
	position: relative;
	display: inline-block;
	padding: .5em 1em;
	border: 0; margin: .5em;
	background: transparent;

csssecrets

/**
 * Diamond images — via clip-path
 */

img {
	max-width: 250px;
	margin: 20px;
	-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
	transition: 1s;

csssecrets

/**
 * Trapezoid tabs
 */

body {
	padding: 40px;
	font: 130%/2 Frutiger LT Std, sans-serif;
}

nav {

csssecrets

/**
 * Animated pie chart
 */

.pie {
	width: 100px; height: 100px;
	border-radius: 50%;
	background: yellowgreen;
	background-image: linear-gradient(to right, transparent 50%, currentColor 0);
	color: #655;

csssecrets

/**
 * Static pie charts
 */

.pie {
	display: inline-block;
	position: relative;
	width: 100px;
	line-height: 100px;
	border-radius: 50%;

csssecrets

/**
 * Static interpolation via paused animations
 * This technique becomes more useful if you need to interpolate more than 1 properties, and/or if you need multiple values in the spectrum
 * Currently works in every modern browser except Safari
 */

@keyframes foo {
	from { background: red }
	to { background: yellowgreen }
}