Few hours ago, I asked, how can I implement triangle as an arrow in a tooltip.
I got perfect answer which is here:
How to create triangle and use it as a arrow in tooltip
Now I am working on tooltip from antd library. Arrow in this tooltip is not look quite as I want to. I would like to style this same as in the previous question - as in the link above.
Here's the link to codebox where I tried to style tooltip from antd library using code from the previous question - as in the link above.
https://codesandbox.io/s/colorful-tooltip-antd-4-21-0-forked-bre16f?file=/demo.js
The problem:
As you can see the corner of the arrow is a bit too long, there are white gaps at the lower border. Nothing like that happens in the previous example. Everything is perfectly fit there
Where's the problem?
You can change the height of the arrow as pointed below.
.ant-tooltip-inner:after {
content: "";
position: absolute;
top: 100%;
height: 12px; /* <=======control the height here */
right: calc(-1 * var(--t));
border-right: var(--b);
box-sizing: initial;
}
I didn't get the white gaps at the lower borders. Can you point it out with an image/screenshot?
Related
I am trying to make a sidebar that is similar to the one shown here: https://www.sketchapp.com/docs/ .I made everything working fine except making the box shadow opacity at top and bottom, I tried box shadow but couldn't make it the way its shown in the page. what I did so far
Thanks in advance! ^^
image to see
Welcome to SO.
You can use pseudo selectors and add to them a background with a linear gradient.
for example:
div::before {
background: linear-gradient(180deg, #fcfcfc, rgba(252,252,252,0));
content: '';
display: block;
width: 100%;
height: 4rem;
position: absolute;
z-index: 0;
}
here i am doing the following:
I set the background to a linear gradient fades the color, I put display block in order to make it behave like a div, finally I set the z-index to 0 in order to place it at the top of the other elements.
here is a working demo: https://jsfiddle.net/hdsma1fv/5/
references:
about pseudo elements: https://www.w3schools.com/CSS/css_pseudo_elements.asp
about linear gradients: https://www.w3schools.com/css/css3_gradients.asp
Edit:
If you need the shadow to hide with the scroll then you need to attach the pseudo selector ::before to an element inside the scroll and remove the position: absolute;.
Also if you want it to show in the bottom also, you need two things: first - rotate the linear gradient angle and second - use the pseudoselector ::after instead of the ::before one.
check https://jsfiddle.net/hdsma1fv/34/ for an updated example with both modifications.
I've created a fiddle to better show what I'm trying to ask.
angle crop of pseudo element
Here's a image showing the desired result:
li.active::after {
content: '';
position: absolute;
background: #fff;
width: 10em;
height: 100%;
height: 20em;
top: 5%;
left: 15%;
transform: rotate(-75deg);
}
What I'm looking to do is have the li active class display a colored background with a cropped angled at the bottom.
it should adapt to the length of the link
needs to see through to the background
include the angle part within the link
be responsive
Is this possible in pure css?
The best way I have found to do this in pure CSS is using a the background-image property with a linear-gradient, going from one color to transparent.
You can use the color of the element itself as a mask, or you can use the background. The difference with be how you define the gradient angle and gradient color.
In this example, I have used your object color to get the effect:
http://jsfiddle.net/948ud6f7/
You will notice it is pretty jagged and not as crisp as if you were to use an image. I am not sure of a workaround with this yet, but different browsers render the edges differently, so this at least gives you a starting point.
Good luck!
You can do that by using one of three methods:
transform/rotate
border-width/border-color(transparent)
box-shadow
I am creating a slider with custom "prev/next" navigation-arrows.
All the animations works fine. I use the transform: scale() to scale up the arrows when hovering and it all works fine. I just have one problem..
I want to prevent the arrow images to scale too.
I think I have tried everything: I've used somekind of :before/:after (see below) and it worked pretty good. But not in Safari (No transition when hover).
http://jsfiddle.net/XF4Qj/5/
Then I tried something else: Putting a span inside the arrow container, and when the arrow container was scaled up, the span was scaled down, but it didn't looked good at all (See below).
http://jsfiddle.net/Ajngc/1/
I have tried for hours, but I cannot get it to work in all major browsers.
So the question is: How to I prevent the arrow-images from scaling too, and just preserve their original dimensions?
It's only the white circle that schould be scaled up, and not the background image.
I've created a third fiddle, which has all the working code from my slider-arrow-functions:
http://jsfiddle.net/Ajngc/2/
Could be really great if someone could help me with this.
Thank you very much
- Jesper
Instead of transform()ing those elements, why not just change the size? See this updated fiddle.
.arrow:hover {
width: 50px;
height: 50px;
top: -5px;
bottom: -5px;
}
.prev:hover {
left: 35px;
}
.next:hover {
right: 35px;
}
I'm using foundation framework for the first time and for the most part everything is going smoothly. I am however having some trouble with the accordion in that I need to change the open/close indicator triangle that is in use. You can see it in the docs here. I've looked through the css and found the section with the accordion on foundation.css at lines 709-719 but there is no image to change or adjust.
I would like to change this icon to the one in my psd, but just can't figure out where. See attached screenshot for what needs to be changed.
I know how to make changes, in this case I just can't find where to make the change.
You can't find the image, because it's not an image. It's one section of a thick border on a small square. One side is grey, the other sides are transparent to create the triangle effect.
See "presentation.css" line 852:
ul.accordion > li.active .title::after {
content: "";
display: block;
width: 0;
height: 0;
border: solid 6px;
border-color: #9D9D9D transparent transparent transparent;
}
I used Google Chrome's object inspector.
Working in Chrome, I found the AngularJS animations appear to break elements that have position: fixed applied to them. I can not reproduce the issue in Safari or Firefox.
I'm unsure if I'm doing something wrong, or if I could be doing something better to fix the issue.
I have a Plunker illustrating the issue here: http://plnkr.co/edit/fhI7M7ev75AGYzesf4GB?p=preview
To reproduce, the following must be done (as the layout of Plunker seems to fix the issue):
Run the Plunk (in Chrome)
Breakout the preview into a new window
Reduce the height to show just the colored box
Click on the "Click Me" button and then scroll to witness issue
If you reload the scrolling list page the top banner will be correctly fixed to the top.
The CSS for the top banner is simple:
.fplcd-top-banner {
background-color: #7c7c7c;
background: linear-gradient(to bottom, #7c7c7c, #666666);
height: 50.15745px;
left: 0;
margin-bottom: 7.16535px;
padding: 7.16535px;
position: fixed;
top: 0;
width: 320px;
z-index: 10; }
If you edit the plunk and remove the animation (at the bottom of the CSS file, comment above them) styles, the issue no longer persists.
Is this a known issue, or am I doing something just odd enough that would knock Chrome out of whack? In either case, is there a tweak that can be done to fix this up?