#clip-path

My code :

progress[value] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

width: 40px;

height: 40px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

Hi Anon!

This is a job for Clip-Path!

CLIP PATH AND NON BASIC SHAPES

clip-path is an CSS rule you can use to change the visible shape of an element by "hiding" the unwanted excess. You can create simple shapes like a rhombus or very complicated ones like a cloud!

There are three basic shapes: circle, ellipse, and polygon. The path requires to set points in the element to define the border of the shape. For example:

will be coded as:

clip-path: ellipse(25% 40% at 50% 50%);

will be coded as:

clip-path: circle(50% at 50% 50%);

will be coded as:

clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

The more complex the form, the longer the path will be. For very complex shapes, you'd need to use the clip-path: path(). Like this:

clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')

But this requires SVG knowledge...

====

Here are two website who will help with most basic shapes:

Clippy

CSS clip-path Editor

====

But going back to your issue, here's what you can do:

remove the transform rules (all of them)

add this in its place:

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

AND BAM!

One of the first games I built - before board games and arcade games and word games - was a simple tile-sliding puzzle.

In this square of squares, you have to slide the pieces into the right places, from 1 to 15 (with a gap so you've always got somewhere to slide a tile to). At the time, my JavaScript knowledge (aka jQuery) was more limited, so instead of sliding with mousemove, it's just click listeners - and since there's only ever one gap, it's always clear where you want to push the piece. What is not clear is why I added a layer of invisible, clickable <div>s over the actual tiles.

Yeah... you're not actually clicking the tile, but an invisible area on top, whose values sort of carry through, I guess. The sliding itself is powered by a jQuery animation, which identifies the direction, then moves the square in question a set distance over the course of a set time - set, of course, by how big the board is.

The game knows you win when all of the elements are in their "home" position. This might be clever, but continuing to loop through everything even after hitting a false is not:

Another weird quirk - those numbers are actually sections of an image.

Yeah, all that weird inline CSS means that each tile is actually the entire "finished" board, but with a mask so only that one square is visible. This is massively wasteful for these number tiles, but sort of makes sense when you see it used on a custom image (by changing the background-image: url() attribute).

The strangest thing (well... second strangest, after line 37′s if (!(gridSize.length > 0)) {) is the animation on game startup. That janky jumbling isn't just for show: it's actually to ensure the board is solvable, by sliding to it one legal move at a time. In other words, no matter how weird this code might be, it definitely works.

tl;dr: jQuery animations really do simplify things; don't repeat yourself, like I do in that convoluted slide directions section; clip-path works great for image masks

My girlfriend is also learning to code, building a personal website for her Etsy shop. Her core offering includes hand-knitted cats, dogs, and rabbits - realistic, soft, and truly unique - each of which she designs and crafts herself. It was her idea to build a digital component: games.

The cat game is complete, and the bunny one is underway. Above, yarnSwatter features the cats she's created (all available on Etsy) doing what cats do best: knocking stuff on the floor. Inspired by one of my favorite Steam games, this endlessly entertaining Javascript game depicts balls of yarn falling on a table, which sinks under the weight unless the cat can push them off in time

Notably, the cats are "drawn" using clip-paths - really specific, fine-tuned ones - with url's location.search parameters filling in the backgrounds with actual images of yarn.

Then jQuery animations power the falling yarns, whose colors and positions are of course generated with help from Math.random().

To make them roll, rather than seem to slide across the surface, we had to do a bit of geometry to find the right rotation rate. Eventually, we found that the CSS transform: rotate(###deg); needed to change by 24 degrees for every 10px of lateral movement, here split into 8 “frames”.

jQuery animations are also in effect for the sometimes inconsistent table-moving mechanic. The idea is that the table has a target height for each number of yarn balls resting on it - from 200px for none down to a losing 0px at 20 balls of yarn. Theoretically, then, it's just a matter of animating it up or down a set amount until it hits the target - but in practice, these animations sometimes overshoot, leading to a bit of a wiggle.

Finally, the cat interactions are actually fed into the yarns' movement. While the mouse and arrow do indeed move the cat back and forth, the yarn gets pushed within its own animation loop - the same one from the falling before. That means every 100ms, each ball of yarn checks if it's being pushed, as opposed to the cat constantly checking what it's pushing every pixel it moves.

Add in a simple score counter that goes up when yarn hits the ground - and a lose condition that checks when the cat does - and you've got a game. A pretty fun one, too. How high can you score?

tl;dr: jQuery animations are so easy and helpful; but they can't touch CSS transform properties, so you need to do it a bit more manually; clip-paths make a great stand-in for <canvas> and <svg>, especially with custom background-images