Context
I did a pure CSS tooltip with pseudo-element :before and :after for the arrow.
The rendering is different from Chrome 16 to Firefox 9 and 10.
You see what's wrong?
Chrome screenshot
Firefox screenshot
Demo
http://jsfiddle.net/wDff8/ reproduces the same issue.
Code
html:
<span class="tooltip">Déposez votre fichier dans ce dossier</span>
css:
span.tooltip {
display: inline-block;
background: #eee;
margin-left: 20px;
padding: 0 10px;
color: #111;
border-radius: 2px;
border-top: 1px solid #bbb;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
line-height: 1.5;
position: relative;
}
span.tooltip:before {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent #eee transparent transparent;
left: -18px;
top: -1px;
z-index: 1;
}
span.tooltip:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 11px;
border-color: transparent #bbb transparent transparent;
left: -21px;
top: -2px;
z-index: 0;
}
body {
font-family: Georgia;
font-size: 12px;
letter-spacing: 1px;
}
May be Instead of transparent you have to write this rgba(238,238,238,0)in your css check this for more
CSS Transparent Border Problem In Firefox 4?
Solution
I juste removed a few pixels, which corrected the rendering on Firefox.
The rendering is not identical but close enough.
Chrome screenshot
Firefox screenshot
Demo
http://jsfiddle.net/wDff8/1/
Modified code
span.tooltip:after {
border-width: 10px;
left: -19px;
top: -1px;
}
Related
I need an outline of a button that is curved on the top and bottom, but not the sides. See the Sample Image below to understand what I'm asking for. I will style all the buttons on my website like this one. I've tried a few ways of doing this with border-radius but I haven't been successful yet. Thank you.
Use :before and :after to button
.btn {
border-top:none;
border-bottom:none;
border-right: 2px solid white;
border-left: 2px solid white ;
background-color: #273649;
color: white;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
}
body{
background-color: #273649;
}
.btn:after {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 48px;
left: 7px;
border-radius: 40%;
}
.btn:before {
display: block;
content: "";
position: absolute;
width: 89px;
height: 16px;
border-top: white 2px solid;
top: 4px;
left: 7px;
border-radius: 40%;
}
<button class="btn">Info</button>
I know this is not the answer that you expected, but I think that the best way to get this result (being the easiest way to get decent results) is with a backgroung-image.
.button {
background-image: url(https://raw.githubusercontent.com/dknacht/GitHub-Test/master/rect4136.png);
background-size: 100% 100%;
}
I just post it in case that someone with similar needs wants to have an alternative.
here an example: https://codepen.io/dknacht/pen/qKbWaY
Dknacht.
I am trying to add a ribbon/a way to highlight a particular cell in my table. I have found some code for a ribbon, but I can't get it to work with my table.
Presently I just get a square in the cell I want the ribbon to go in
Here is the fiddle
https://jsfiddle.net/4xwzuqpn/2/
The code for the ribbon:
thead th p.promo { font-size: 1em; color: #fff; position: absolute; top: 9em; left: -17px; z-index: 1000; width: 100%; margin: 0; padding: .625em 17px .75em; background: #c00; box-shadow: 0 2px 4px rgba(0,0,0,.25); border-bottom: 1px solid #900; }
thead th p.promo:before { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 0 7px 7px 0; border-color: transparent #900 transparent transparent; bottom: -7px; left: 0; }
thead th p.promo:after { content: ""; position: absolute; display: block; width: 0px; height: 0px; border-style: solid; border-width: 7px 7px 0 0; border-color: #900 transparent transparent transparent; bottom: -7px; right: 0; }
You had an error with your CSS on line 233 on your jsFiddle (an extra } character).
That error caused your CSS rule:
thead th {
position: relative;
}
not to render. Once the error is fixed, the position: relative works and that fixes the position of the ribbon.
edit: Actually, anything under line 233 won't render. Not only the positioning, but the entire definition on your ribbon.
Check this out:
https://jsfiddle.net/4xwzuqpn/3/
So I've found this answer - CSS3 menu shape, style but have no idea on how to put it on the left side. I've searched for it already but with no luck.
This is what I'm trying to achieve:
And I've found this one also - Change the shape of the triangle. How can I make it work on the opposite side? I mean the arrow needs to be on the left side. And is it possible to do this with one div?
Want one that you can put over any background color?
jsBin demo
Only this HTML:
<span class="pricetag"></span>
And this CSS:
.pricetag{
white-space:nowrap;
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:25px;
border-radius: 0 5px 5px 0;
padding: 0 25px 0 15px;
background:#E8EDF0;
border: 0 solid #C7D2D4;
border-top-width:1px;
border-bottom-width:1px;
color:#999;
line-height:23px;
}
.pricetag:after{
position:absolute;
right:0;
margin:1px 7px;
font-weight:bold;
font-size:19px;
content:"\00D7";
}
.pricetag:before{
position:absolute;
content:"\25CF";
color:white;
text-shadow: 0 0 1px #333;
font-size:11px;
line-height:0px;
text-indent:12px;
left:-15px;
width: 1px;
height:0px;
border-right:14px solid #E8EDF0;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
}
which basically follows this principles: How to create a ribbon shape in CSS
If you want to add borders all around:
jsBin demo with transform: rotate(45deg) applied to the :before pseudo
.pricetag{
white-space:nowrap;
position:relative;
margin:0 5px 0 10px;
displaY:inline-block;
height:25px;
border-radius: 0 5px 5px 0;
padding: 0 25px 0 15px;
background:#E8EDF0;
border: 1px solid #C7D2D4;
color:#999;
line-height:23px;
}
.pricetag:after{
position:absolute;
right:0;
margin:1px 7px;
font-weight:bold;
font-size:19px;
content:"\00D7";
}
.pricetag:before{
position:absolute;
background:#E8EDF0;
content:"\25CF";
color:white;
text-shadow: 0 0 1px #aaa;
font-size:12px;
line-height:13px;
text-indent:6px;
top:3px;
left:-10px;
width: 18px;
height: 18px;
transform: rotate(45deg);
border-left:1px solid #C7D2D4;
border-bottom:1px solid #C7D2D4;
}
Since the example image in the question has extra outer borders, achieving it with the border trick will involve multiple (pseudo) elements and will become complex (because in addition to the arrow shape, a circle is also needed in front). Instead, the same could be achieved by using transform: rotate() like in the below sample.
The approach is pretty simple and as follows:
The parent div container houses the text that should be present within the price-tag shape.
The :after pseudo-element has transform: rotate(45deg) and produces the triangle shape. This is then positioned absolutely with respect to the left edge of the parent. The background set on the pseudo-element prevents the left border of the parent container from being visible.
The :before pseudo-element forms the circle present on the left side (using border-radius).
The X mark at the end is added using a span tag and the × entity.
The parent div container's width is set to auto so that it can expand based on the length of the text.
Note: This sample uses transforms, so will require polyfills in lower versions of IE.
div {
position: relative;
display: inline-block;
width: auto;
height: 20px;
margin: 20px;
padding-left: 15px;
background: #E8EDF2;
color: #888DA3;
line-height: 20px;
border-radius: 4px;
border: 1px solid #C7D2DB;
}
div:after,
div:before {
position: absolute;
content: '';
border: 1px solid #C7D2DB;
}
div:after { /* the arrow on left side positioned using left property */
height: 14px;
width: 14px;
transform: rotate(45deg);
background: #E8EDF2;
border-color: transparent transparent #C7D2DB #C7D2DB;
left: -6px;
top: 2px;
}
div:before { /* the circle on the left */
height: 4px;
width: 4px;
border-radius: 50%;
background-color: white;
left: 0px;
top: 7px;
z-index: 2;
}
.right { /* the x mark at the right */
text-align: right;
margin: 0px 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Home<span class='right'>×</span>
</div>
<div>Home Sweet Home<span class='right'>×</span>
</div>
<div>Hi<span class='right'>×</span>
</div>
Fiddle Demo
I wanted a simplified version of what was proposed here (without the hole effect and borders) but with the pointing side of it with rounded corner as well. So I came up with this solution. Visually this is what you get:
The HTML for it:
<div class="price-tag">Marketing</div>
<div class="price-tag">Sales</div>
<div class="price-tag">Inbound</div>
And the CSS for it:
.price-tag {
background: #058;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 0.875rem;
height: 30px;
line-height: 30px;
margin-right: 1rem;
padding: 0 0.666rem;
position: relative;
text-align: center;
}
.price-tag:after {
background: inherit;
border-radius: 4px;
display: block;
content: "";
height: 22px;
position: absolute;
right: -8px;
top: 4px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
width: 22px;
z-index: -1;
}
.price-tag:hover {
background: #07b;
}
original example
Modified: http://jsbin.com/ruxusobe/1/
Basically, it needs to float left, use border-right (instead of left) and modify the padding.
CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 5px 5px 0px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: left;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-right: 11px solid transparent;
border-bottom: 11px solid white;
}
HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active"><span class="activePointer"></span>Law</li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is a simple example...
Orignal Version
Edited Version
CSS:
div {
margin-left: 15px;
background: #76a7dc;
border: 1px solid #CAD5E0;
padding: 4px;
width:50px;
position: relative;
}
div:after {
content:'';
display: block;
position: absolute;
top: 2px;
left: -1.3em;
width: 0;
height: 0;
border-color: transparent #76a7dc transparent transparent;
border-style: solid;
border-width: 10px;
}
Notice on border-color, only right is set with a color and everything else is set to transparent.
using pseudo element and a little bit playing with border you can achieve the exact thing. Check the DEMO.
HTML code is :
<a class="arrow" href="#">Continue Reading</a>
CSS Code is:
body{padding:15px;}
.arrow {
background: #8ec63f;
color: #fff;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 12px;
position: relative;
border-radius: 4px;
border: 1px solid #8ec63f;
}
.arrow:before {
content: "";
height: 0;
position: absolute;
width: 0;
}
.arrow:before {
border-bottom: 15px solid transparent;
border-right: 15px solid #8ec63f;
border-top: 15px solid transparent;
left: -15px;
}
.arrow:hover {
background: #f7941d;
color: #fff;
border-radius: 4px;
border: 1px solid #f7941d;
}
.arrow:hover:before {
border-bottom: 15px solid transparent;
border-top: 15px solid transparent;;
border-right: 15px solid #f7941d;
}
I was working on folded paper effect and this seems to work on almost all browsers except IE8.
Here is the JSBIN code : http://jsbin.com/oLepimiK/6/edit
I saw a different question on SOF where :before and :after tags are supported, but I guess I am missing something here. Can someone point that out to me?
MY IE8 MODE:
I believe that box-shadow is not supported in IE8, so the shadow under the 'fold' will not appear.
CanIUse.com
It is working, you are having problems with Z-INDEX, and I changed the top and left to -1.
.clear{
padding-left: 30px;
}
.complaint:after {
border-color: transparent #F58C1E #F58C1E transparent;
border-style: solid;
border-width: 10px;
content: "";
left: 0;
position: absolute;
top: 0;
z-index: 12;
}
.complaint:before {
border-color: white #A65807 #A65807 white;
border-style: solid;
border-width: 11px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
content: "";
left: -1px;
position: absolute;
top: -1px;
width: 0;
z-index: 11;
}
.complaint {
background-color: #F58C1E;
border-style: solid;
border-width: 1px 1px 0;
padding: 4px;
position: relative;
}
RESULT:
I'm trying to create a tag shape with the css only so that it looks like:
I'm trying following but unable to use the border for the triangle area.
HTML:
Test
CSS:
a{
float: left;
height: 35px;
position:relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before{
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 18px 18px;
}
JSFiddle:
http://jsfiddle.net/Sac3m/
You could rotate a square instead, although i doubt the results will be great cross-browser
Modified code:
a {
float: left;
height: 35px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:after {
content: "";
position: absolute;
top: 4px;
right: -13px;
width: 25px;
height: 25px;
border: 1px solid red;
border-left: none;
border-bottom: none;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
<a></a>
(Latest IE, Firefox and Chrome seems OK with it)
Update
If you need IE8 support, you could try to put a white triangle on top of the (original) red triangle:
a {
float: left;
height: 36px;
position: relative;
border: 1px solid red;
border-right: none;
width: 100px;
}
a:before {
content: "";
position: absolute;
top: -1px;
right: -18px;
width: 0;
height: 0;
border-color: white white white red;
border-style: solid;
border-width: 19px 0 19px 19px;
}
a:after {
content: "";
position: absolute;
top: 0;
right: -17px;
width: 0;
height: 0;
border-color: transparent transparent transparent white;
border-style: solid;
border-width: 18px 0 18px 18px;
}
<a></a>
The below code helps to create a tag shape. It works in all major browsers.
#swc {
position: relative;
margin: 0 5px 0 10px;
display: inline-block;
height: 66px;
padding: 0 35px 0 20px;
font-size: 25px;
line-height: 65px;
cursor: pointer;
font-weight: 100;
margin: 20px 25px;
background: #f3f3f3;
transition: background 0.3s;
}
#swc:after {
position: absolute;
content: "";
right: -19px;
width: 1px;
height: 0px;
border-left: 18px solid #f3f3f3;
border-top: 33px solid transparent;
border-bottom: 33px solid transparent;
transition: border 0.3s;
}
#swc:hover {
background: green;
color: #ffffff;
}
#swc:hover:after {
border-left-color: green;
}
<span class="pricetag-right" id="swc">Tag Content!</span>
We had a slightly different implementation of this that produces rounded corners. This uses a rounded square that's turned 45°.
.tag {
display: inline-block;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 transparent #c8d7f2 #c8d7f2;
border-radius: .25em 0 0 .25em;
padding: 0.1em 0.6em 0.1em 0.3em;
background-color: #e5ecf9;
line-height: 1.2em;
}
.tag:after {
content: "\25CF";
position: absolute;
display: inline-block;
height: 1.2em;
width: 1.17em;
transform: rotate(45deg);
color: white;
text-indent: 0.3em;
line-height: 1em;
text-shadow: 0 0 1px #333;
background-color: #e5ecf9;
border-radius: 0.33em 0.33em 0.33em 1em;
border-width: 1px;
border-style: solid;
border-color: #c8d7f2 #c8d7f2 transparent transparent;
}
<h1 class="tag">my-tag</h1>
A couple things to note:
The square contains a circle punctuation mark. To adjust it you use line-height and text-indent.
The borders on the square need to be set to transparent color with a width of 1px. If you don't, the other borders (the visible ones) taper off where they go from 1px to 0px.
his works pretty well and it's nearly pixel-perfect, but it does render slightly differently across Chrome and Firefox. I tried to make it work with a transparent background, but you need some sort of color to cover up the funkiness where the square meets the tag. It's not quite perfect.
The nice thing about this is that it can be applied as a class and it can be used on H1-H6, or p tags.