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,html,ajax
I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...
javascript,jquery,html,arrays,contains
I want to search all the elements containing any string in the array. For example I have following list of items <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li> <li>hockey stick</li> </ul> and this array var arr = ['bat', 'ball']; It should select all the elements having text bat and ball....
html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...
javascript,jquery,html,scroll
I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well... http://stackoverflow.com/a/7513110/3703099 My code : http://jsfiddle.net/0sq2rfcx/9/ As you can see, when you click on button it...
html,css
Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work. Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the...
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...
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...
javascript,html,css,image
I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...