This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 6 years ago.
While following this tutorial, this piece of code is claimed to draw an arrow, but was never explained properly.
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
<div class="tooltip">Sample text</div>
Can anybody please explain how's it doing that?
The trick is in the border color and width. Imagine a box with zero height and width, just the borders, those borders are meeting in the exact center. If you draw one border with a color (#333 in this case) and leave the rest as transparent, you get an arrow.
The technique is explained further on CSS Tricks: https://css-tricks.com/snippets/css/css-triangle/#article-header-id-2
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 1 year ago.
I was inspecting and learning shapes through css, and i got stumped by how the css even forms this figure. I tried changing the colors of the borders, but it does not even make sense, as it does not represent the outline of the original shape anyways, and before i put position: absolute the figure doesn't look anything like the final picture, but as soon as I place that line, it all just sticks together and transforms into the shape I pictured.
#star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
<div id='star-six'></div>
In CSS we make triangles using the border width. A six point star is nothing but two triangles places over one another in inverted position.
The first part of your code snippet makes a simple triangle. (Try commenting the :after part)
To make another triangle one could have used another div and position it over the first. But to accommodate it in a single class we have pseudo elements (:after). It is used to create inverted triangle.
Now coming to your second question why position absolute is needed. It is used to position the second triangle over the first one in inverted manner. You can see position relative is given #star-six.
Hope this helps. If needed I can share codepen link to explain it well.
Codepen Link
Refer above link for code
This question already has answers here:
CSS 3 Shape: "Inverse Circle" or "Cut Out Circle"
(7 answers)
Transparent half circle cut out of a div
(8 answers)
Creating right curve using css3
(1 answer)
Closed 2 years ago.
In the picture you can see the Rough desired layout of SAP (rotated by 90 degrees clockwise).
My first instinct would be to split it into 3 components:
the nav-bar on top
simple div containing some text
and for the bottom I was stuck. After searching I opted for a svg path component and combined all 3 in a parent component.
Any other components will be rendered below the curve.
So far it works. But I am curious if there are other, maybe better, solutions to this (which I am sure there are).
Thanks in advance
Another way to achieve this would be to add an ::after element to the navbar with some border-radius to make the curve. Here is an example:
#navbar {
position: relative;
background-color: lightblue;
padding: 30px;
}
#navbar::after {
content: "";
position: absolute;
height: 30px;
width: 100%;
background-color: lightblue;
bottom: 0;
left: 0;
transform: translateY(50%);
border-radius: 0 0 100% 100%;
}
<div id="navbar">
Website
</div>
This question already has answers here:
Border with a transparent centred arrow
(3 answers)
Closed 7 years ago.
I am trying to generate a straight horizontal line with a breakdown in the middle to display an arrow. The idea is that the content displayed under the line will provide details about the content displayed above the line. Here is what the line should look like:
I am trying to generate this with pure HTML and CSS (no bitmap images). Use of Font Awesome is acceptable if it ends up producing the right result. I need control over the line's thickness and color. The angle of the breakdown does not matter (45 and 90 degrees on the sample shown above). I am aware of this CSS triangle trick, but I can't think of a way to apply it to this scenario.
This nice effect can be achieved using the CSS :before and :after properties. It's best to play around with Simon Højberg's online generator at cssarrowplease.
A solution with a transparent arrow background, allowing you to use it with every background:
HTML:
<div class="line-separator">
<div class="side-line"> </div>
<div class="triangle"> </div>
<div class="side-line"> </div>
</div>
CSS:
.side-line {
display: inline-block;
border-top: 1px solid black;
width: 20%;
}
.triangle {
display: inline-block;
height: 7px;
width: 7px;
transform: rotate(45deg);
transform-origin: center center;
border-top: 1px solid black;
border-left: 1px solid black;
margin: 0 -3px -3px;
}
Live demo:
http://jsfiddle.net/85saaphw/
This question already has answers here:
Creating rounded corners using CSS [closed]
(21 answers)
Closed last month.
I was wondering if it was possible to create a double rounded border without nesting DIV's?
See my example here: http://jsfiddle.net/eXDjL/
The first box is rounded, but the ouline stays square, the second box has no rounded corners but shows the borders how I want them.
I know there is a -moz-outline-radius property, but anything for the other browsers?
If not I guess I'll just stick with two divs.
To mimic different color borders you can use box-shadow - http://jsfiddle.net/eXDjL/3/
.genyx_content_full {
background-color:#f7f7f7;
border: #fff 1px solid;
padding: 10px;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 0px 0px 0px 1px #dedede;
}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
drop shadow only bottom css3
With CSS3, how would one make a drop shadow only appear on the bottom edge of a DIV? I would like it to work in FF4, IE9, C10.
Setting a positive Y-offset doesn't quite look right - I can still see faint remnants of the shadow the other edges and the shadow on the bottom edge is too stiff.
You can reference the link #thirtydot posted. I would use two div. This would make it exactly like your posted image.
#container{
width: 200px;
height: 210px;
overflow: hidden;
}
#element{
width: 200px;
height: 200px;
background-color:aqua;
box-shadow: 0px 5px 5px #888;
float: left;
}
<div id="container">
<div id="element"></div>
</div>