I've used this on my website, but I'm baffled how it generates the arrow using CSS.
There doesn't appear to be anything that screams "shape generation" to me within the CSS.
The default CSS shown on their website is:
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
left: 50%;
margin-left: -36px;
}
How does it create an arrow?
Thanks
It uses "before" and "after" CSS pseudo-elements
http://www.w3schools.com/css/css_pseudo_elements.asp
Related
Is it possible to style(skew) triangle like on the picture on the right side?
http://s15.postimg.org/h2vruavmz/triangle.jpg
I want to skew it, make background transparency 0.5 and hide bottom border of the triangle.
body {
background-color: #ccc;
}
.arrow_box {
position: absolute;
top: 40px;
left: 40px;
background: #fff;
/*border: 1px solid #ffffff;*/
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #fff;
border-width: 20px;
margin-left: -20px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #000;
border-width: 21px;
margin-left: -21px;
}
<div class="arrow_box"></div>
The method you are currently using means that you will not be able to set a semi transparent "background" on the triangle. This is because the black borders of the triangle are actually a slightly larger separate triangle, it just happens that the smaller white triangle is overlaying its center. If you modify the white triangle's opacity then you will just peek through to the black triangle.
This can be avoided by using another method to create the triangle. The general principle is to create a box then turn it on its side using transform: rotate(45deg);. Using overflow: hidden; on the container you can cut off half of the box to leave you with a triangle without a bottom border.
You can then skew the container using transform: skewX(55deg); to push the triangle to one side.
body {
background-color: #ccc;
}
.arrow_box {
height: 17px;
left: 40px;
overflow: hidden;
position: absolute;
top: 40px;
transform: skewX(55deg);
width: 34px;
}
.arrow_box:after {
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(0, 0, 0, 1);
content: " ";
height: 20px;
left: 5px;
position: absolute;
top: 5px;
transform: rotate(45deg);
width: 20px;
}
<div class="arrow_box"></div>
you can use transform: skew(60deg,0deg); on the :before and :after
body {
background-color: #ccc;
}
.arrow_box {
position: absolute;
top: 40px;
left: 40px;
background: #fff;
/*border: 1px solid #ffffff;*/
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
transform: skew(60deg,0deg);
}
.arrow_box:after {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #fff;
border-width: 20px;
margin-left: -12px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #000;
border-width: 24px;
margin-left: -21px;
}
<div class="arrow_box"></div>
Fiddle
I don't think you'd be able to make that background transparent easily with the technique you have used to draw triangles. You should use png image if you can.
I'm trying to wrap my head around the following example
http://jsfiddle.net/marlonpp/HkTE9/1/
This is the CSS the example uses
body { padding: 20px; }
/*input[type="button"] { margin: 100px 0 0 10px; }*/
input[type="button"] { margin: 10px 0 0 10px; }
.ui-tooltip {
font-family: arial, sans-serif;
color: #000;
font-size: 14px;
padding: 5px 20px;
position: absolute;
background: white;
border: 1px solid #767676;
max-width: 180px;
z-index: 9999;
}
.ui-tooltip-content::after, .ui-tooltip-content::before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.bottom .ui-tooltip-content::after {
border-color: rgba(118, 118, 118, 0);
border-top-color: white;
border-width: 10px;
left: 50%;
margin-left: -10px;
}
.bottom .ui-tooltip-content::before {
border-color: rgba(118, 118, 118, 0);
border-top-color: #767676;
border-width: 11px;
left: 50%;
margin-left: -11px;
}
.top .ui-tooltip-content::after {
top: -10px;
left: 50%;
border-color: white transparent;
border-width: 0 10px 10px;
margin-left: -10px;
}
.top .ui-tooltip-content::before {
border-color: rgba(118, 118, 118, 0);
border-bottom-color: #767676;
top: -11px;
left: 50%;
border-width: 0 11px 11px;
margin-left: -11px;
}
It creates a nice triangle arrow for the tooltip and it does it with borders.
The one thing I really don't understand:
Why or how does it work?
I don't understand why it seems to be transformed 45 degrees without any transformation rule?
I tried to take this example and create an arrow for the left and the right side but since I don't how it works in the first place I fail.
Any ideas/explanations?
a good explanation is at:
https://css-tricks.com/snippets/css/css-triangle/
or
http://davidwalsh.name/css-triangles
I think they say all you need to know about css triangles
This question already has answers here:
CSS triangle custom border color
(5 answers)
Closed 8 years ago.
Please any one help me how create below diagram using css.
________/\_______
| |
| |
| |
|________________|
Please help me how to it will done using css.and only div should be use.
See here: http://jsfiddle.net/alexwcoleman/6ue8vvba/
.box {
position: relative;
border: 1px solid #000;
height:100px;
width:300px;
margin-top:100px;
background:#fff;
}
.box:after, .box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #fff;
border-width: 30px;
margin-left: -30px;
}
.box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #000;
border-width: 31px;
margin-left: -31px;
}
This code use for create triangle:
HTML:
<div id="talkbubble"></div>
CSS:
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
margin-top: 50px;
}
#talkbubble:before {
content: "";
position: absolute;
right: 43%;
bottom: 100%;
width: 0;
height: 0;
border-left: 13px solid transparent;
border-bottom: 25px solid red;
border-right: 11px solid transparent;
}
SEE DEMO HERE:DEMO
I have a dropdown menu with fixed height and when I want to scroll down, the text is hidden below the top caret.
What can I do to make the text visible in the caret also?
I'm not using any image for the caret.Everything is done using CSS.
This is my code:
<div class="arrow_box">
<div class="content">
.... text ....
</div>
</div>
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
width: 300px;
margin: 0 auto;
top:20%;
text-align: center;
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #88b7d5;
border-width: 30px;
margin-left: -30px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #c2e1f5;
border-width: 36px;
margin-left: -36px;
}
.content{
height: 200px;
width: 100%;
overflow-y:auto;
text-align: center;
}
I want to make a navigation bar that has an arrow pointing down on hover.
Similar to this:
Is there any way to do this in CSS without using the arrow as a background image and putting padding on the element?
You can use the :after pseudo-element to create a CSS triangle and the position it absolutely.
Something like this:
li.active a:after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 6px solid #333;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -3px
}
Demo
Use a <div class="arrow_box">INFORMACION</div>
With the CSS:
.arrow_box {
position: relative;
background: #88b7d5;
border: 1px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 15px;
margin-left: -15px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-top-color: #c2e1f5;
border-width: 21px;
margin-left: -21px;
}
Generated with http://cssarrowplease.com/
(a simple search on google and you would have found that..)
Using CssArrowPlease as posted before me:
<div class="header">
<div class="nav">
<ul>
<li>Page</li>
<li id="checked">
Page 1
<div class="arrow_box"></div>
</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>
<div class="sub_nav"></div>
</div>
css:
.header{
width: 50%;
background-color: #fbfbfb;
}
.nav ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#checked{
padding: 10px;
background-color: #3178ed;
display: inline-block;
color: #fff;
position: relative;
}
.nav li{
padding: 10px;
display: inline-block;
}
.sub_nav{
width: 100%;
height: 20px;
background-color: #dddddd;
}
.arrow_box {
position: absolute;
right: 0;
left: 0;
bottom: 0;
background: #3178ed;
}
.arrow_box:after, .arrow_box:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(49, 120, 237, 0);
border-top-color: #3178ed;
border-width: 10px;
margin-left: -10px;
}
.arrow_box:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: ;
border-width: 11px;
margin-left: -11px;
}
Fiddle: Link