HTML Academy
Cubic Curve: End Point and Two Control Points
CSS shape() #318/20
Back to the list of tasks
  • 1. Segment Type I
  • 2. Segment Type II
  • 3. End Point I
  • 4. End Point II
  • 5. End Point X Coordinate
  • 6. End Point Y Coordinate
  • 7. First Control Point I
  • 8. First Control Point II
  • 9. Control Point X Coordinate
  • 10. Control Point Y Coordinate
  • 11. Second Control Point I
  • 12. Second Control Point II
  • 13. Second Control Point X Coordinate
  • 14. Second Control Point Y Coordinate
  • 15. Adding a Second Control Point
  • 16. End and Control Points
  • 17. Cubic Curve: End Point and Two Control Points
  • 18. Arrowhead Shape
  • 19. Upper Transition
  • 20. Lower Transition
Upper Transition
  • Sign up
  • Log in

Loading…
Everything will be ready in a few seconds.

  • Challenge

Arrowhead Shape

Recreate the target with code
DifficultyEasy
CategoryHTML/CSS
Current
Your current page
Target
The result to match
ResultAppears after the first checkAppears after checking
  • index.html
  • style.css
HTML
CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Challenge</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="local-18.css"> <link rel="stylesheet" href="style.css"> </head> <body> <main class="stage"> <div class="shape-shell"> <div class="shape"></div> </div> </main> </body> </html>
.shape { clip-path: shape( from 0px 0px, line to 230px 0px, line to 300px 70px, {{curveCommand}} line to 230px 220px, line to 0px 220px, close ); }
-1
Preview

The code has changed. Click “Reload” or turn on autorun.

You have left the challenge page.

Click inside the preview to focus this window.

100%
0
    Completed 0%.

    Challenge completed

    Extra moves
    Continue

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2026

    VISAMastercard

    We are using cookies to gather information which will help you use our website most effectively. You can read about this here or disable this feature if you want. By continuing to browse the site, you agree to our use of cookies.