Triangle Clip Path Experiment w/ SVG

HTML
<svg width='0' height='0'> <defs> <clipPath id="cp" clipPathUnits="objectBoundingBox"> <path d="M0.500, 0.945 L0.994, 0.090 L0.006, 0.090 L0.500, 0.945 L0.500, 0.650 L0.262, 0.238 L0.738, 0.237 L0.500, 0.650z"></path> </clipPath> </defs> </svg> <div class="triangle first"></div>
CSS
html, body { height: 100%; width: 100%; background: linear-gradient(to bottom, rgba(103,178,111,1) 0%, rgba(76,162,205,1) 100%); } .triangle { -webkit-clip-path: url(#cp); clip-path: url(#cp); width: 300px; height: 300px; background-size: cover; background-blend-mode: screen; position: absolute; top: 50%; left: 50%; } .first { background-color: #333; background-image: url("http://i.giphy.com/xbkfWmU8bcTMQ.gif"); -webkit-transform: translateX(-65%) translateY(-50%) rotate(60deg); transform: translateX(-65%) translateY(-50%) rotate(60deg); }
JAVASCRIPT
Expand for more options Login