html,css,pseudo-element,css-shapes,pseudo-class , Using CSS Pseudo-Selectors to achieve a ribbon shape
Using CSS Pseudo-Selectors to achieve a ribbon shape
Question:
Tag: html,css,pseudo-element,css-shapes,pseudo-class
i have the following structure where multiple elements within a carousel have a numbered badge, the white part above works fine when using white background, but in some situations an image gets behind the badge. Is it possible to make the same effect but with a transparent white space below?
Here is the HTML code
<p class="mostwanted"><strong>1</strong></p>
CSS code
.mostwanted {
width: 80px;
height: 56px;
padding-top: 5px;
position: absolute;
background: #ffc909;
color: white;
font-size: 25px;
text-align: center;
font-family: 'Viga', sans-serif;
top: 2px;
right:17px;
z-index: 10;
}
.mostwanted:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #fff;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
Sample Fiddle
JsFiddle
Thanks in advance.
Answer:
Pretty straightforward.
All we're doing is swapping your border triangle's sides.
This CSS:
border-bottom: 13px solid #fff;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
Becomes this:
border-bottom: 13px solid transparent;
border-left: 40px solid #ffc909;
border-right: 40px solid #ffc909;
And then just move it to outside the div, like so:
.mostwanted:after {
...
bottom: -13px
...
}
Alternate
Another way to do this would be to use two pseudos for the ribbon frill:
.mostwanted:after, .mostwanted:before {
content: "";
position: absolute;
bottom: -13px;
width: 0;
height: 0;
}
.mostwanted:after {
left: 40px;
border-bottom: 13px solid transparent;
border-right: 40px solid #ffc909;
}
.mostwanted:before {
left:0;
border-bottom: 13px solid transparent;
border-left: 40px solid #ffc909;
}
You'll notice the aliasing is better (in Chrome at least) for the second option. I'd give you an explanation, but I can't be 100% sure exactly why that is. My educated guess would be that one is rendering a border joinder while the other is rendering what would ostensibly be an element edge.
Related:
javascript,jquery,html
I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later) <td class="choice-option"> <input...
javascript,jquery,html,internet-explorer
I'm working on a site and im having some issues with my slider in IE9. What I've done is that I've made a div that gets the background image changed every few seconds depending on the img tags within. You can see it in function here: http://diakondk.quine.pil.dk/ It works wonders...
html,css
I made a website for one of my clients, and I change the background and font color. Now on windows xp and smartphones the background changed color to the default color and the fonts remained the same. The website is simfest.ro I don't know what to do to make it...
html,angularjs
Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...
javascript,jquery,html,css
I am dynamically creating submit buttons using javascript. I wanted to know how to introduce horizontal spacing between every other button in the process. My code is var allFields = commonButtons.concat(extraFields); for (var i = 0; i < allFields.length; i++) { var node = document.createElement("input"); var btName = document.getElementById("submit-buttons"); node.setAttribute('data-value',...
javascript,html,css
Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...
javascript,php,jquery,html,css3
I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...