1006–[CSS] Bookmark Ribon Style

Media Files

No media files provided.

Project Submission

+ Submit Assignment

Your submissions


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


Given the following HTML code:

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

Please implement the following style in CSS.

Bookmark CSS Screen

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


❓ 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.



Marking scheme