CaptAsh / Css-ClipPath-Exercise

Css-ClipPath-Exercise

Css-Clip-Path-Exercise

Data Structure

• Create a fancy shape using clip-path website and then using that shape in your HTML.

Method

<!-- in HTML used  HTML Semantic Elements

• Click here to see HTML Code

/* used close 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%)
 Left-Chevron clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
Right-Chevron clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);  and close 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%)

• Click here to see CSS Code

used Google Fonts for unique h1 font-family.

Resources

• CSS clip-path maker by Dave Desandro
• Design inspired from Ioannis's Project

Result

Feel free to click here for the deployment!