How to create a ribbon shape in CSS - html

Question

http://jsfiddle.net/6HyjZ/
.bookmarkRibbon{
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
}
<div class="bookmarkRibbon"></div>
I'm struggling to make a version of this shape where the ribbon is pointing right instead of down,
how can I achieve this?

Answer 1

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

Answer 2

Using the helpful accepted answer here is it with text version.
Vertical(Top to bottom) Banner with text
.ribbon-vertical {
position: absolute;
right: 10px;
border: 13px solid #e46a76; /* All borders set */
border-top: 0; /* Remove left border */
border-bottom: 10px solid transparent; /* Right transparent */
height: auto; /* Increase element Width */
width: 0;
word-wrap: break-word;
color: white;
z-index: 1;
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}
.ribbon-vertical div{
position: relative;
right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
<div class="ribbon-vertical"><div>BANNER</div></div>
Horizontal(Right to Left) Banner with text
.ribbon-horizontal{
position: absolute;
right: 0;
bottom: 5rem;
border: 13px solid #e46a76;
border-right: 0;
border-left: 10px solid transparent;
height: 0;
line-height: 0;
width: 100px;
color: white;
z-index: 1;
-webkit-filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
letter-spacing: 3px;
}
.ribbon-horizontal span{
position: relative;
padding: 0 4px 0 10px;
text-align: center;
}
<div class="ribbon-horizontal"><span>BANNER</span></div>

Answer 3

.bookmarkRibbon{
width:100px;
height:0;
border-bottom:50px solid blue;
border-top:50px solid blue;
border-right:30px solid transparent;
}

Answer 4

If you 'rotate' the css properties, it rotates the form by 90 degrees.
.bookmarkRibbon{
width:100px;
height:0;
border-bottom:50px solid blue;
border-top:50px solid blue;
border-left:30px solid transparent;
}
http://jsfiddle.net/6HyjZ/6/

Answer 5

Use transform:rotate :
.bookmarkRibbon{
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
}

Answer 6

Just swap what you have and you are good to go jsfiddle:
.bookmarkRibbonRight{
width:100px;
height:0px;
border-right:30px solid transparent;
border-bottom:50px solid blue;
border-top:50px solid blue;
}

Answer 7

You already have the shape, just use the transform property to change its angle.
Here is the code that I have added to the code you have.
transform: rotate(270deg);
Here is the fiddle, http://jsfiddle.net/6HyjZ/11/ It now points to the right (unless that's right right side)

Answer 8

Use the rotate css transform:
.bookmarkRibbon{
width:0;
height:100px;
border-right:50px solid blue;
border-left:50px solid blue;
border-bottom:30px solid transparent;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
http://jsfiddle.net/6HyjZ/13/