Upgrade To Pro Member for this Resource

Limtless possibilites
Introductions to roles that fit your skills
Pro tutorials, courses & resources
Portfolio analytics - see how popular your profile really is
Portfolio featured on home page
Choose plan ($10pm)

Description

<!-- SNIPPET NAME HERE -->
<style>
/* clip elements to specific shapes */
/* provide 4 values for each side in the order: top, right, bottom, left to create the polygon */
/* the calc() property is used to make calculations based on viewport  */
.cp-1{
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
 -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%); /* webkit browsers */
}

.cp-2{
clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
 -webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%); /* webkit browsers */
}

.cp-3{
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
 -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%); /* webkit browsers */
}

.cp-4{
clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
 -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%); /* webkit browsers */
}

.cp-btn {
clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
 -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); /* webkit browsers */
}

.cp-btn:hover {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
 -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); /* webkit browsers */
}
</style>

Title:

Learn how to make slanted edges with a bit of code with webflow

Creator:

CodeCrumbs

Type:

Video

Access:

Pro Members

Free

Likes:

1

Link:

Tools:

Webflow

Interact (Members Only):

Liked

Description

<!-- SNIPPET NAME HERE -->
<style>
/* clip elements to specific shapes */
/* provide 4 values for each side in the order: top, right, bottom, left to create the polygon */
/* the calc() property is used to make calculations based on viewport  */
.cp-1{
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
 -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%); /* webkit browsers */
}

.cp-2{
clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
 -webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%); /* webkit browsers */
}

.cp-3{
clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
 -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%); /* webkit browsers */
}

.cp-4{
clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
 -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%); /* webkit browsers */
}

.cp-btn {
clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
 -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%); /* webkit browsers */
}

.cp-btn:hover {
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
 -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%); /* webkit browsers */
}
</style>

Title:

Learn how to make slanted edges with a bit of code with webflow

Creator:

CodeCrumbs

Type:

Video

Access:

Pro Members

Free

Likes:

1

Link:

Tools:

Webflow

Interact (Members Only):

Liked

Other Resources You May Need

Other Resources→