Clip Path Practice


by Jeremy Caudle
code

I've worked with clip-path and I'm always happy when I get to practice with it more. I often work with Bennett Feely's Clippy, CSS clip-path maker, while working with custom shapes. It's a great tool.

Ellipse
Circle
Triangle

View the code:

HTML and JS 
<div class="codedoodle-block">
			<div class="box clip-ellipse"><span>Ellipse</span></div>
			<div class="box clip-circle"><span>Circle</span></div>
			<div class="box clip-triangle"><span>Triangle</span></div>
		</div>
CSS 
.codedoodle-block {
			margin: 1rem auto;
			max-width: 30rem;
			background-color: rgba(0, 0, 0, 0.2);
			padding: 1rem;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			justify-items: center;
			align-items: center;
		}
		
		
		.box {
			background-color: green;
			display: flex;
			flex-flow: column;
			width: 5rem;
			height: 5rem;
			justify-content: center;
			align-content: center;
			text-align: center;
		}
	
		
		.clip-ellipse {
			clip-path: ellipse(25% 40% at 50% 50%);
			/*-moz-clip-path: ellipse(25% 40% at 50% 50%);*/
			-webkit-clip-path: ellipse(25% 40% at 50% 50%);
		}

		.clip-circle {
			clip-path: circle(50%);
			/*-moz-clip-path: circle(50%);*/
			-webkit-clip-path: circle(50%);
		}
		
		.clip-triangle {
			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
			/*-moz-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);*/
			-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
		}

Tags