CSS shape() #36/20

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

First Control Point I

Sign up
Log in

Loading…
Everything will be ready in a few seconds.

Challenge

End Point Y Coordinate

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-6.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, vline to 40px, curve to 280px {{endY}} with 160px 20px, line to 320px 220px, hline to 0px, 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%

My resultTarget⛶

0

Completed 0%.

Challenge completed

Extra moves

Continue

ChallengeCodePreview

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.