System32
Active Coder
So, I have this ribbon:
Works great, awesome. Now, How can I revert this? I want arrow to point to the left. This is ribbon css:
HTML is simple:
One more question, can I add small dashed border(1px) inside the ribbon, like this:
Image is awefall but...
Works great, awesome. Now, How can I revert this? I want arrow to point to the left. This is ribbon css:
CSS:
.ribbon3 {
width: 150px;
height: 50px;
line-height: 50px;
padding-left: 15px;
position: absolute;
left: -8px;
top: 20px;
background: #f51111;
}
.ribbon3:before, .ribbon3:after {
content: "";
position: absolute;
}
.ribbon3:before {
height: 0;
width: 0;
top: -8.5px;
left: 0.1px;
border-bottom: 9px solid black;
border-left: 9px solid transparent;
}
.ribbon3:after {
height: 0;
width: 0;
right: -14.5px;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid #f51111;
}
HTML is simple:
HTML:
<span class="ribbon3">Admin</span>
One more question, can I add small dashed border(1px) inside the ribbon, like this:
Image is awefall but...