HTML Academy
Real-Life Triangles, Part 2
Frames and Backgrounds33/33
Back to the list of tasks
  • 1. Preparation
  • 2. Background Size, Step 1
  • 3. Background Size, Step 2
  • 4. Background Borders
  • 5. Background Cropping
  • 6. Multiple Background Images
  • 7. Positioning the background relative to different borders
  • 8. background-repeat: round
  • 9. background-repeat: space
  • 10. Outer Frame
  • 11. Rounding Corners, Part 1
  • 12. Rounding Corners, Part 2
  • 13. Frame Image: border-image-source
  • 14. Frame Image: border-image-slice
  • 15. Slicing Asymmetrical Images
  • 16. Frame Image: border-image-repeat, Part 1
  • 17. Frame Image: border-image-repeat, Part 2
  • 18. Frame Image: border-image-width
  • 19. Frame Image: border-image-outset
  • 20. Muffin’s Royal Frame
  • 21. Muffin’s Eco-Frame
  • 22. Muffin’s Round Frame, Part 1
  • 23. Muffin’s Round Frame, Part 2
  • 24. Challenge: The Sea Wolf
  • 25. Frames and Triangles, Part 1
  • 26. Frames and Triangles, Part 2
  • 27. Frames and Triangles, Part 3
  • 28. Creating an Arrow with a Frame
  • 29. Creating a Round Arrow with a Frame, Part 1
  • 30. Creating a Round Arrow with a Frame, Part 2
  • 31. Real-Life Triangles, Part 1
  • 32. Real-Life Triangles, Part 2
  • 33. Challenge: Jewelry Work
List of tasks
  • Sign up
  • Log in

Register to take up challenges

Registration will only take a minute and let you save your study progress. You can register with your email and password or login via social networks.

or
Log in and continue
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Challenge: Jewelry Work</title> <meta charset="utf-8"> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body class="exam wall"> <div class="chest"> <div class="stone hexa"></div> <div class="stone penta"></div> <div class="stone rhomba"></div> <div class="stone octa"></div> </div> </body> </html>
CSS
selector { position: absolute; } selector { position: absolute; border-style: solid; content: ""; } selector { bottom: 70px; left: 50px; } selector { top: 20px; right: 40px; overflow: hidden; width: 100px; height: 100px; } selector { top: 50px; left: 40px; width: 80px; height: 40px; } selector { right: 45px; bottom: 50px; width: 90px; height: 35px; } selector { background-color: #7fdbff; } selector { background-color: #2ecc40; } selector { width: 30px; border-color: #7fdbff transparent; } selector { border-color: #ff4136 transparent; } selector { border-color: #2ecc40 transparent; } selector { top: -30px; border-width: 0 30px 30px; } selector { border-width: 0 50px 50px; } selector { bottom: -30px; border-width: 30px 40px 0; } selector { top: -30px; border-width: 0 40px 30px; } selector { border-width: 50px 30px; border-color: #ffdc00 transparent; } selector { top: 50px; border-width: 100px 50px 0; } selector { top: 0; border-bottom: 0; } selector { bottom: -30px; border-width: 30px 30px 0; } selector { bottom: 0; border-top: 0; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

100%
  • Goal
  • Result
  • Overlay
  • Differences
  • ?

Press Compare to send your code for review.

Failed to load the goal. Try later.

Goal — the interface you need to get.

Result — the way the server sees your code. Can differ from what you see in the mini-browser. The comparison is made between this result and the goal.

Overlay — semi-transparent result is shown above the goal.

Differences — the map of differences between the goal and the result.

Done 0%.
The code has been changed

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

VISAMastercard