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,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...
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...
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?...
jquery,html,css,drop-down-menu
I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...
css,wordpress,html-lists
I am adding some pages on a wordpress themed website. There is a table with 3 columns: 1st column will be the title (larger font). Since it looks better and editing is easier, I started using <ul> instead of <td> Even though it works fine on JSFIDDLE font-size on the...
jquery,html,css,drop-down-menu
How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...
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,css,google-maps,google-maps-api-3
I'm not using the Markers in Google Maps because I wish to render custom text and images on my marker, so what I did is a custom marker using Overlays. The Overlay position is not exactly like the marker so I played a bit with it and now it is...
javascript,css,string,numeric
<span id='amount'>0.00000000</span> <a class='button-withdraw' id='tombolco' href='#'>Checkout</a> <script> var amount = document.getElementById("amount").innerHTML; if (amount >= 0.001) { document.GetElementById("tombolco").style = "display:block"; } else { document.GetElementById("tombolco").style = "display:none"; } </script> Why my code doesn't work? What's wrong with it and how to solve it?...
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',...