How to create a ribbon shape in CSS

by

Ribbon shape using CSS Clip Path:

.bookmarkRibbon {
  width: 100px;
  height: 60px;
  background: blue;
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 20px) 50%, 100% 100%, 0% 100%);
}
<div class="bookmarkRibbon"></div>

Pointing down:

.bookmarkRibbon {
  width: 60px;
  height: 100px;
  background: blue;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 20px), 0% 100%, 0% 0%);
}
<div class="bookmarkRibbon"></div>

Ribbon shape using CSS border

To help you visualize the logic step-by-step, so you can apply it easily on any side:

CSS Ribbon Shape - How To Create

.bookmarkRibbon {
  border:       30px solid blue;        /* All borders set */
  border-left:  0;                      /* Remove left border */
  border-right: 20px solid transparent; /* Right transparent */
  width:        100px;                  /* Increase element Width */
}
<div class="bookmarkRibbon"></div>

More Related Contents:

  1. I want to get this CSS shape and have a background puicture inside it
  2. Cut Corners using CSS
  3. Element will not stay centered, especially when re-sizing screen
  4. How to create a circle with links on border side
  5. How to create uneven rounded sides on a div?
  6. Shape with a slanted side (responsive)
  7. CSS Cut out circle from a rectangular shape
  8. How to use CSS to surround a number with a circle?
  9. How to make a curved edge hexagon by using CSS
  10. html/css hexagon with image inside
  11. How to draw circle in html page?
  12. Responsive CSS Trapezoid Shape
  13. Hexagon shape with a border/outline
  14. Create a slanted edge to a div [duplicate]
  15. How to bevel the corner of a block div?
  16. Dynamically aligning pseudo element according to parent height
  17. CSS Speech Bubble with Box Shadow
  18. Center Triangle at Bottom of Div
  19. CSS box shadow around a custom shape?
  20. Slanted diagonal line in html or css?
  21. How can I make a 45 degree responsive ribbon with folded corner?
  22. Border with a transparent centred arrow
  23. Add outward curving border to elements like this: ◝◟___◞◜
  24. How can I make a div with irregular shapes with css3 and html5?
  25. Skewed Borders on a Div
  26. Pixelated edge around a CSS Circle with overflow: hidden;
  27. div with triangle at the bottom with background image
  28. Responsive CSS Circles
  29. How to create a triangle in CSS3 using border-radius
  30. How to transform each side of a shape separately?

Leave a Comment