I need help turning the arrow white with a blue border like the box containing the text. I need to use the title inside an a tag as the content but feel free to edit everything else I managed to get it to a certain point but cant seem to get past this:
CSS
.toop {
position: relative;
padding: 0 5px;
line-height: 23px;
}
.toop:hover:after {
content: attr(title);
color: #474747;
font-size: 14px;
line-height: 150%;
text-align: left;
background-color: #ffffff;
border-radius: 5px;
border: 2px solid #2192ce;
padding: 5px 10px;
opacity: 0.9;
display: block;
width: 180px;
position: absolute;
left: 10px;
bottom: 40px;
z-index: 98;
}
.toop:hover:before {
content: "";
border: solid;
border-color: #2191ce transparent;
border-width: 10px 10px 0 10px;
opacity: 0.9;
display: block;
left: 30px;
bottom: 30px;
position: absolute;
z-index: 99;
}
HTML
<br>
<br>
<br>
<br>
<br>
Tooltip is here
you can not do that , you can not have a border around the "arrow" . making that arrow is a trick you can do with css to manipulate the :after and :before to make it appear like an arrow , but you can not have a border outside of that unless you wanted to use an image and put it in that place.
see an example I made of your code to show
outline: 2px solid #000;
outline can be used to make a border outside of the actual border, but it is not going to be anything like what you wanted.
http://jsfiddle.net/pp9t0vqb/4/
The best you can do is fake the arrow with an entire block:
.toop:hover:before {
content: "";
width:10px;
height:10px;
background:white;
border: 2px solid #2192ce;
border-width:0 2px 2px 0;
transform:rotate(45deg);
display: block;
left: 30px;
bottom:35px;
position: absolute;
z-index: 99;
}
But in this case you can't handle the opacity property.
Check this Demo Fiddle
Related
I need to draw an arrow, preferably using pseudo (:after or :before) elements. it is supposed to look like this:
But it looks like this:
This is my code:
HTML:
<div class="info">
<p>Learn about our technology<span class="arrow-right"></p></span></div>
CSS:
.arrow-right:after{
content: "";
display:inline-block!important;
width:0;
height:0;
border-left:14px solid #C8A962;
border-top:14px solid transparent;
border-bottom: 14px solid transparent;
}
Well of course it looks like that because you use a code just for the triangle part of the arrow.
You need to add the other part also. You can do that with the other pseudo-element before.
You can change and adjust 'width' 'height' 'color' and so on.
.arrow-right:after {
content: "";
display: inline-block !important;
width: 0;
height: 0;
border-left: 8px solid #C8A962;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
vertical-align: middle;
}
.arrow-right:before {
width: 20px;
height: 2px;
background: #C8A962;
content: "";
display: inline-block;
vertical-align: middle;
}
<div class="info"><a href="http://www.bay42.io" class="arrow1">
Learn about our technology<span class="arrow-right"></span>
</a></div>
You can try using arrow html code → for this purpose
<div class="info">
<p>Learn about our technology<span>→</span><p></p></div>
Looks like my comment got lost
You can use the character → . See : https://dev.w3.org/html5/html-author/charref you'll find the character entities that you need. for a pseudo, use content:"\2192"; + font-size to scale it
.arrow1::after {
content: '\2192';
/* little make up */
font-size: 2em;
/* whatever needed*/
padding: 0 0.5em;
/* whatever needed*/
vertical-align: -0.1em;
/* whatever needed*/
}
a {
text-decoration: none;
float:left;
clear:both
}
.arrow1:nth-child(2)::after {
content: '\21fe';
display:inline-block;
transform:scale(2,1);
}
.arrow1:nth-child(3)::after {
content: '\21d2';
display:inline-block;
transform:scale(2,0.8);
}
Learn about our technology
Another one stretched
or that one can be used and stretched too
p {
position: relative;
width: max-content;
}
.arrow-right:after {
top: 50%;
right: -50px;
position: absolute;
content: "";
display: inline-block !important;
width: 0;
height: 0;
border-left: 14px solid black;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
transform: translateY(-50%) scale(0.4);
}
.arrow-right:before {
content: "";
width: 25px;
height: 1px;
background: black;
position: absolute;
top: 50%;
right: -40px;
transform: translateY(-50%);
}
Try this. Change the colour to white.
I'm using Responsive tabs by petelove666 and I have a small detail I'd like to add but it seems I can not get it to work.
I would like a arrow-down formed by triangle at the middle of active tab.
I tried to change CSS to
.responsive-tabs__list__item--active{
background: white;
color: #3E4649;
/*border-bottom: 2px solid #F39114;*/
position: absolute;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 20px #F39114;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
}
But it doesn't work at all.
Here is my fiddle https://jsfiddle.net/dvx8nw15/. And the goal is to have a down arrow at the middle of active tab as seen from the attached picture with blue color:
All you need to do is to add an absolutely centered triangle to list__item:
.responsive-tabs__list__item { position: relative }
.responsive-tabs__list__item--active:after {
content: '';
height: 0;
width: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
left: 0;
right: 0;
top: 100%;
margin: auto;
position: absolute;
display: block;
}
And the updated fiddle
Remove the list-style-type from the list items and add a div that will be your arrow. The triangle trick is to set an element with size 0 but to set a border, the top border in that case is actually a triangle, so when you give it a color and set the other side to be transparent you'll get a triangle.
li{
list-style-type:none;
display: flex;
align-items: center;
}
.arrow{
width: 0px;
height: 0px;
border: 5px solid transparent;
border-top-color: #F39114;
margin-top: 0.2em;
margin-right: 0.2em;
}
<ul>
<li><div class="arrow"></div>One</li>
<li><div class="arrow"></div>Two</li>
<li><div class="arrow"></div>Three</li>
</ul>
UPDATE
Adding a fiddle without adding a div and using :before pseudo element instead
Example with your code
You need to add class arrow to each li you want to style or otherwise add it to the container once and then set .arrow li instead of li.arrow
Second example - better since you don't need to style each li
Just add position: relative to your li.responsive-tabs__list__item. And then use a pseudoclass to print the arrow in your active item with this code:
.responsive-tabs__list__item--active:after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 20px;
height: 20px;
background: black;
margin-left: -10px;
transform: rotate(45deg);
z-index: -1;
}
You can find an example in this fiddle
I have a tooltip made with position: absolute and pseudo elements. The problem is that when the element associated with the tooltip is too close to the side - the tooltip partly gets out of the screen and is unreadable. Is there a way I can calculate/prevent the tooltip going out of the screen?
http://jsfiddle.net/o9s4dy0t/25/
This is the CSS code:
.tooltip {
display: inline;
position: relative;
}
.tooltip:after {
background: #111;
background: rgba(0,0,0,.8);
border-radius: .5em;
bottom: 1.35em;
color: #fff;
content: attr(title);
display: table;
padding: .3em 1em;
position: absolute;
text-shadow: 0 1px 0 #000;
max-width:200px;
right:60px;
z-index: 98;
}
.tooltip:before {
border: solid;
border-color: #111 transparent;
border-color: rgba(0,0,0,.8) transparent;
border-width: .4em .4em 0 .4em;
bottom: 1em;
content: "";
display: block;
left: 0;
position: absolute;
z-index: 99;
}
It's fine if the arrow is off - I might remove it in the future.
This needs calculation to be done. Using plain CSS I don't think it will be possible. However, there are various libraries already doing so. One of the many is:
https://getbootstrap.com/docs/4.1/components/popovers/
You may use this in your code and make it work.
I'm looking for a proper way to have an effect highlighted in below picture at
the bottom of my box in CSS3.
Getting this effect with shadow will have the problem that the border-radius will decrease if you lower the size of the shadow. Can be solved, but it's quite convoluted.
Your best bet would be to use pseudo elements for this
.test {
width: 300px;
height: 100px;
border: solid 1px green;
border-radius: 10px;
position: relative;
background-color: white;
}
.test:after, .test:before {
content: "";
position: absolute;
border: inherit;
border-radius: inherit;
background-color: white;
height: 50px;
}
.test:after {
left: 6px;
right: 6px;
bottom: -6px;
z-index: -1;
}
.test:before {
left: 14px;
right: 14px;
bottom: -12px;
z-index: -2;
}
<div class="test"></div>
Have tried box-shadow? You could use box-shadows multiple times and control their positions. for example :
box-shadow: 1px 1px 1px #color of your choice, (comma for another shadow) 2px 2px 2px #color of your choice, (and on as much as you want);
you can add another value like 1px 1px 1px 1px black . the fourth represents the size of the shadow.
I hope this helps or if you could be more specific :)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have a jsfiddle here - http://jsfiddle.net/0nvns9Lj/1/
I've done what I need to do but don't know if it's the best way - I'm sure it should be easier.
I just need to create a play button so I have a circle containing a triangle.
It's working but seems like alot of messing for something simple
.wrap{
background: #ddd;
height: 300px;
position: relative;
}
.circle{
background: red;
border-radius: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin: -25px 0 0 -25px;
}
.circle_inner{
position: relative;
height: 100%;
}
.circle_inner:before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -7px;
}
You can (and should) do this simpler.
* { margin:0; padding:0 }
figure {
background: #ddd;
height: 200px;
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
figure button[name="play"] {
width: 50px;
height: 50px;
background: red;
border: none;
border-radius: 100%;
margin: auto;
cursor: pointer;
}
figure button[name="play"]:focus {
outline: 0;
border: 1px solid hsl(210, 58%, 69%);
box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}
figure button[name="play"]::after {
content: '';
display: inline-block;
position: relative;
top: 1px;
left: 3px;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}
<figure>
<button name="play"></button>
</figure>
Editable demo: http://jsbin.com/mipali/5
There is not much to improve.
Maybe you can use a special font like 'Webdings', and otherwise you can make a simple CSS triangle. In both cases you just need a simple element for the button, and a ::before pseudo-element for the shape. In the HTML and CSS below, both methods are shown.
Both buttons use a normal A element, so the buttons could (if you can find any url or useful onclick event to attach to it) still work as a normal link when you don't even have CSS (think about the visually impaired).
Moreover, the HTML doesn't contain any extra markup apart from the class names. No 'inner' element needed, and I think that's the most important improvement. The CSS isn't that much shorter than your's but I got rid of the 'inner' element, so the markup is completely clean.
And remember: if you want more complex shapes, you also have a ::after pseudo-element at your disposal. :)
/* Basic red round button properties */
.button {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: red;
color: white;
/* Hide the text 'play', which is present in the HTML document for accessibility */
font-size: 0;
}
/* Properties for the pseudo-element that almost every button will need.
You can just merge it into the style below if you are only going to have
the play button. */
.button::before {
content: "";
display: block;
position: absolute;
}
/* Play button properties using font */
.play1.button::before {
font-family: 'Webdings';
font-size: 28px;
content: '\25B6';
top: -2px;
left: 12px;
}
/* Play button properties using CSS shape */
.play2.button::before {
width: 0;
height: 0;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 15px solid white;
top: 10px;
left: 16px;
}
Play<br>
Play