<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="clip-image.html">
<style>
clip-image {
max-width: 300px;
}
</style>
</head>
<body>
<!-- Works on Chrome and Firefox -->
<h3>Clippy clip-paths</h3>
<a href="https://bennettfeely.com/clippy/" target="_blank">https://bennettfeely.com/clippy/</a>
<clip-image
image="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"
clip
clippyname="trapezoid">
</clip-image>
<hr>
<!-- Works on Chrome and Firefox -->
<h3>SVG inside element</h3>
<clip-image
image="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"
clip
svgname="svghexagon">
</clip-image>
<hr>
<h3>Custom clip-path (CSS only)</h3>
<clip-image
image="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"
clip
customclippath="polygon(100% 0, 10% 33%, 98% 38%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)">
</clip-image>
<hr>
<!-- Works only on Firefox :( -->
<h3>Custom SVG (with slot svg)</h3>
<p style="color: red;">Doesn't work on chrome</p>
<clip-image
image="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg"
clip
customsvg="swirl">
<svg slot="customsvg" height="0" width="0">
<defs>
<!--
Adding the clipPathUnits="objectBoundingBox" to the clipPath element.
This sizes the polygon properly.
-->
<clipPath id="swirl" clipPathUnits="objectBoundingBox">
<!-- utilize relative values for the points attribute -->
<path d="M19.947,20.442a.5.5,0,0,0,.5-.5v-.019a.625.625,0,0,0-.067-.253.618.618,0,0,0-.106-.147c-.049-.05-.065-.054-.069-.054s-.01.016.015.11a.3.3,0,0,1-.053.272.338.338,0,0,1-.231.1.257.257,0,0,1-.2-.1.237.237,0,0,1-.035-.208.219.219,0,0,1,.162-.146.121.121,0,0,1,.031,0,.18.18,0,0,1,.2.165.15.15,0,0,1-.141.153.117.117,0,0,1-.12-.156.093.093,0,0,1,.084-.059.068.068,0,0,1,.042.015l0,0a.056.056,0,0,1,.017.019.053.053,0,0,1-.051.078.072.072,0,0,1-.041-.016.049.049,0,0,0,.01.016.072.072,0,0,0,.056.021.068.068,0,0,0,.066-.073.083.083,0,0,0-.069-.084.118.118,0,0,0-.032,0,.13.13,0,0,0-.124.093.154.154,0,0,0,.019.125.166.166,0,0,0,.141.07h0a.206.206,0,0,0,.134-.067.17.17,0,0,0,.046-.131.211.211,0,0,0-.187-.207h0a.265.265,0,0,0-.032,0,.476.476,0,0,0-.44.33.5.5,0,0,0,.474.66Z" transform="translate(-19.447 -19.452)" fill="#1d1c1a"/>
</clipPath>
</defs>
</svg>
</clip-image>
</body>
</html>
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<!-- import the iron-input element -->
<link rel="import" href="https://polygit.org/components/iron-image/iron-image.html">
<link rel="import" href="./clip-image-styles.html">
<dom-module id="clip-image">
<template>
<style include="clip-image-styles">
:host {
background-color: var(--clip-image-background-color, transparent);
@apply --clip-image-container;
}
#img-container {
width: var(--clip-image-size, 100%);
height: 0;
padding-bottom: var(--clip-image-size, 100%);
}
iron-image {
--iron-image-width: 100%;
--iron-image-height: 100%;
background-color: var(--clip-img-background-color, #eee);
}
</style>
<!-- If it has image but no svg clip path -->
<template is="dom-if" if="{{!clip}}">
<template is="dom-if" if="{{image}}">
<div id="img-container">
<iron-image
sizing="cover"
preload
fade
src="{{image}}"
alt="{{alt}}"
placeholder="{{placeholder}}"></iron-image>
</div>
</template>
</template>
<!-- If it has image and clip path -->
<template is="dom-if" if="{{clip}}">
<!-- If it has a custom clip-path (CSS only) -->
<template is="dom-if" if="{{customclippath}}">
<div id="img-container"
style$="-webkit-clip-path: {{customclippath}};
clip-path: {{customclippath}};">
<iron-image
sizing="cover"
preload
fade
src="{{image}}"
alt="{{alt}}"
placeholder="{{placeholder}}"></iron-image>
</div>
</template>
<!-- If it has an SVG clip path -->
<template is="dom-if" if="{{!customclippath}}">
<div id="img-container">
<!-- If custom SVG within the slot -->
<template is="dom-if" if="{{customsvg}}">
<iron-image
style$="-webkit-clip-path: url(#{{customsvg}});
clip-path: url(#{{customsvg}});"
sizing="cover"
preload
fade
src="{{image}}"
alt="{{alt}}"
placeholder="{{placeholder}}"></iron-image>
<slot name="customsvg"></slot>
</template>
<!-- If just SVG name for default SVGs-->
<template is="dom-if" if="{{!customsvg}}">
<iron-image
id$="{{clippyname}}"
class$="{{svgname}}"
sizing="cover"
preload
fade
src="{{image}}"
alt="{{alt}}"
placeholder="{{placeholder}}"></iron-image>
<template is="dom-if" if="{{svgname}}">
<svg height="0" width="0">
<defs>
<!--
Adding the clipPathUnits="objectBoundingBox" to the clipPath element.
This sizes the polygon properly.
-->
<clipPath id="svgstar" clipPathUnits="objectBoundingBox">
<!-- utilize relative values for the points attribute -->
<polygon points="0.5 0 0.654 0.313 1 0.363 0.75 0.607 0.809 0.951 0.5 0.788 0.191 0.951 0.25 0.607 0 0.363 0.345 0.313 0.5 0"/>
</clipPath>
<clipPath id="svgpentagon" clipPathUnits="objectBoundingBox">
<polygon points="0.809 0.956 0.191 0.956 0 0.382 0.5 0 1 0.382 0.809 0.956"/>
</clipPath>
<clipPath id="svghexagon" clipPathUnits="objectBoundingBox">
<polygon points="0.75 0.067 0.25 0.067 0 0.5 0.25 0.933 0.75 0.933 1 0.5 0.75 0.067" />
</clipPath>
<clipPath id="svgdiamond" clipPathUnits="objectBoundingBox">
<rect x="0.146" y="0.146" width="0.707" height="0.707" transform="translate(-0.207 0.5) rotate(-45)" />
</clipPath>
<clipPath id="svgclose" clipPathUnits="objectBoundingBox">
<polygon points="1 0.2 0.8 0 0.5 0.3 0.2 0 0 0.2 0.3 0.5 0 0.8 0.2 1 0.5 0.7 0.8 1 1 0.8 0.7 0.5 1 0.2"/>
</clipPath>
<clipPath id="svgplus" clipPathUnits="objectBoundingBox">
<polygon points="1 0.375 0.625 0.375 0.625 0 0.375 0 0.375 0.375 0 0.375 0 0.625 0.375 0.625 0.375 1 0.625 1 0.625 0.625 1 0.625 1 0.375"/>
</clipPath>
<clipPath id="svghexagonpm" clipPathUnits="objectBoundingBox">
<path id="hex-pm" d="M44.793,50.483a.186.186,0,0,1-.155,0l-.345-.182a.15.15,0,0,1-.077-.12v-.363a.149.149,0,0,1,.077-.12l.345-.182a.188.188,0,0,1,.155,0l.345.182a.149.149,0,0,1,.077.12v.363a.15.15,0,0,1-.077.12Z" transform="translate(-44.215 -49.5)"/>
</clipPath>
<clipPath id="svgtriangleup" clipPathUnits="objectBoundingBox">
<polygon points="1 1 0 1 0.5 0 1 1"/>
</clipPath>
<clipPath id="svgtriangleright" clipPathUnits="objectBoundingBox">
<polygon points="0 1 0 0 1 0.5 0 1" />
</clipPath>
<clipPath id="svgtriangledown" clipPathUnits="objectBoundingBox">
<polygon points="0 0 1 0 0.5 1 0 0" />
</clipPath>
<clipPath id="svgtriangleleft" clipPathUnits="objectBoundingBox">
<polygon points="1 0 1 1 0 0.5 1 0" />
</clipPath>
</defs>
</svg>
</template>
</template>
</div>
</template>
</template>
</template>
<script>
/**
* @customElement
* @polymer
*/
class ClipImage extends Polymer.Element {
static get is() {
return 'clip-image';
}
static get properties() {
return {
image: {
type: String,
value: '',
notify: true
},
placeholder: {
type: String,
value: '',
notify: true
},
alt: {
type: String,
value: '',
notify: true
},
title: {
type: String,
value: '',
notify: true
},
/* Turn on/off support for clipping */
clip: {
type: Boolean,
value: '',
notify: true
},
/* For custom CSS only clip path */
customclippath: {
type: String,
value: '',
notify: true
},
/* CSS only clip paths */
clippyname: {
type: String,
value: '',
notify: true
},
/* SVG clip paths */
customsvg: {
type: String,
value: '',
notify: true,
},
svgname: {
type: String,
value: '',
notify: true
}
};
}
}
window.customElements.define(ClipImage.is, ClipImage);
</script>
</dom-module>
<link rel="import" href="https://polygit.org/components/polymer/polymer-element.html">
<dom-module id="clip-image-styles">
<template>
<!-- Start Style -->
<style>
:host {
display: block
}
#img-container {
position: relative;
overflow: hidden;
display: block;
margin: 0 auto
}
iron-image {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 100%
}
ul#url-list {
display: block;
padding: 0;
margin: 0
}
ul#url-list li {
display: inline-block
}
ul#url-list li a {
display: inline-block;
margin-bottom: 0.5em;
text-decoration: none
}
ul#url-list li a:hover,
ul#url-list li a:active,
ul#url-list li a:focus,
ul#url-list li a:active:focus {
text-decoration: none
}
.svgstar {
-webkit-clip-path: url(#svgstar);
clip-path: url(#svgstar)
}
.svgpentagon {
-webkit-clip-path: url(#svgpentagon);
clip-path: url(#svgpentagon)
}
.svghexagon {
-webkit-clip-path: url(#svghexagon);
clip-path: url(#svghexagon)
}
.svgdiamond {
-webkit-clip-path: url(#svgdiamond);
clip-path: url(#svgdiamond)
}
.svgclose {
-webkit-clip-path: url(#svgclose);
clip-path: url(#svgclose)
}
.svgplus {
-webkit-clip-path: url(#svgplus);
clip-path: url(#svgplus)
}
.svghexagonpm {
-webkit-clip-path: url(#svghexagonpm);
clip-path: url(#svghexagonpm)
}
.svgtriangleup {
-webkit-clip-path: url(#svgtriangleup);
clip-path: url(#svgtriangleup)
}
.svgtriangleright {
-webkit-clip-path: url(#svgtriangleright);
clip-path: url(#svgtriangleright)
}
.svgtriangledown {
-webkit-clip-path: url(#svgtriangledown);
clip-path: url(#svgtriangledown)
}
.svgtriangleleft {
-webkit-clip-path: url(#svgtriangleleft);
clip-path: url(#svgtriangleleft)
}
#triangle {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%)
}
#trapezoid {
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%)
}
#parallelogram {
-webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)
}
#rhombus {
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)
}
#pentagon {
-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)
}
#hexagon {
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
}
#heptagon {
-webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%)
}
#octagon {
-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)
}
#nonagon {
-webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%)
}
#decagon {
-webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%)
}
#bevel {
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)
}
#rabbet {
-webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)
}
#leftarrow {
-webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%)
}
#rightarrow {
-webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%)
}
#leftpoint {
-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%)
}
#rightpoint {
-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%)
}
#leftchevron {
-webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%)
}
#rightchevron {
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)
}
#star {
-webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
}
#cross {
-webkit-clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%)
}
#message {
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%)
}
#close {
-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%)
}
#frame {
-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%)
}
#inset {
-webkit-clip-path: inset(5% 20% 15% 10%);
clip-path: inset(5% 20% 15% 10%)
}
#circle {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%)
}
#ellipse {
-webkit-clip-path: ellipse(25% 40% at 50% 50%);
clip-path: ellipse(25% 40% at 50% 50%)
}
</style>
<!-- End Style -->
</template>
</dom-module>