1006–[CSS] Bookmark Ribon Style

Media Files

No media files provided.

Project Submission

+ Submit Assignment

Your submissions

Background

By using CSS border style, :after and :before, we can create a bookmark style purely in CSS.

Requirement

Given the following HTML code:

<div class="box">
  Book I: Hello World
</div>
<div class="box bookmarked theme1">
  Book II: Learn CSS
</div>
<div class="box bookmarked theme2">
  Book II: Learn CSS
</div>

Please implement the following style in CSS.

Bookmark CSS Screen

*Please note that there is 2 slightly different styles in the screenshot.

Help

❓ Show help content

Submission guideline

You may use Codepen to implement it and submit the link.
You may implement them in file and attach the HTML/CSS file via submission.

Notes

N/A

Marking scheme

[["N/A",null,null,null,null],[null,"","","",null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null],[null,null,null,null,null]]