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
Related
I'm trying to place a css-shaped triangle inside a div.
Here is CSS:
/*Outer DIV*/
div.auth {
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
/*Triangle DIV*/
div.arrow {
width: 0.5em;
height: 65%;
background-color: #000;
position: relative;}
div.arrow::after {
display: block;
content: '';
position: absolute;
left: -60%;
transform: translateY(80%);
bottom: -1em;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
}
Desired result:
https://jsfiddle.net/k1x1car4/
How can I can do the same placement in a less tricky and more precise manner?
Thank you!
Just use an .arrow class and a pseudo-element on the parent div.
There is no need to create actual HTML for styling in this intance.
Then position element bottom:0 and left:0. Simple!
div.auth {
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
border: 1px solid black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
border-left: 3px solid #ccc;
font-family: "T3";
text-align: right;
}
div.arrow {
position: relative;
}
div.arrow::after {
display: block;
content: '';
position: absolute;
left: 0;
bottom: 0;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
}
<div class="auth arrow">par Makarios, Évêque de Lampsaque</div>
I don't know if you are able to change div.arrow, but if so I recommend you not to use a pseudo-element at all and just put the triangle directly into div.arrow. You can then position it using
position: absolute
left: 0;
bottom: 0;
Note: You're going to have to add position:relative to div.auth in order for position:absolute to work on div.arrow.
div.auth {
display: block;
background: powderblue;
padding: 0.5rem;
margin-bottom: 1rem;
width: 90%;
border: 1px solid black;
border-left-width: 1px;
border-left-style: solid;
border-left-color: rgb(204, 204, 204);
border-left: 3px solid #ccc;
font-family: "T3";
text-align: right;
position: relative;
}
div.arrow {
display: block;
content: '';
position: absolute;
border-style: solid;
border-width: 1em 1em 0 1em;
border-color: transparent transparent transparent #000;
left: 0;
bottom: 0;
}
<div class="auth">
<div class="arrow"></div>par Makarios, Évêque de Lampsaque</div>
I am trying to use this ribbon code (found on some generator site)
link included
I think it looks nicev however it just doesn't fit the LONG line of text I need to display in there (PAST PRESIDENT).
This is the first time I'm trying to use a CSS ribbon effect.. and can not seem to wrap my head around what params will make move it over (to the left some)..and make it longer to display the longer text I want to display.
it's a right side justified ribbon (just to be clear).. that needs to be moved over to the left a little bit.. and made 'longer' to display longer text.
Here is my code:
/* CSS ribbon styles */
/* http://www.cssportal.com/css-ribbon-generator/ */
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
font-size:10px;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#2989d8 0%, #1e5799 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #1e5799;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #1e5799;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #1e5799;
border-bottom: 3px solid transparent;
border-top: 3px solid #1e5799;
}
While I made it somewhat bigger using these updated styles..
the font looks a little 'janky'
I cant seem to get the before/after effects to adjust now that I have adjusted the other styles.
Updated:
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 275px;
height: 275px;
text-align: right;
}
/* new bigger attempt */
.ribbon span {
background: rgba(0, 0, 0, 0) linear-gradient(#2989d8 0%, #1e5799 100%) repeat scroll 0 0;
box-shadow: 0 3px 10px -5px rgb(0, 0, 0);
color: #fff;
display: block;
font-size: 10px;
font-weight: bold;
line-height: 20px;
position: absolute;
right: -85px;
text-align: center;
text-transform: uppercase;
top: 32px;
transform: rotate(45deg);
width: 250px;
}
Try this. I updated the width/height/top/left on .ribbon and top/right on .ribbon span.
.box {
width: 200px;
height: 200px;
background: gainsboro;
position: relative;
}
/* CSS ribbon styles */
/* http://www.cssportal.com/css-ribbon-generator/ */
.ribbon {
position: absolute;
right: -6px;
top: -5px;
z-index: 1;
overflow: hidden;
width: 115px;
height: 115px;
text-align: right;
}
.ribbon span {
font-weight: bold;
font-size: 10px;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 125px;
display: block;
background: linear-gradient(#2989d8 0%, #1e5799 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 28px;
right: -24px;
}
.ribbon span::before {
content: "";
position: absolute;
left: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid #1e5799;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #1e5799;
}
.ribbon span::after {
content: "";
position: absolute;
right: 0px;
top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #1e5799;
border-bottom: 3px solid transparent;
border-top: 3px solid #1e5799;
}
<div class="box">
<div class="ribbon"><span>PAST PRESIDENT</span></div>
</div>
I am trying to make a custom element on a wordpress website. It is one of those downward pointing triangles leading into the next page section, but it also has a number on top of it.
My problem is that the way I have it now, the number becomes hidden behind the background of the section above, and I can't get the number/text to remain ontop, which is exacerbated when seen via mobile. changing the z-index didn't help.
This is the css I am using:
/**to create triangle in middle of page **/
div.arrow-down-tan {
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 35px solid #f6f6f6;
position: relative;
left: 50%;
margin-left: -55px;
margin-top: -3%;
padding: 0;
z-index: 2;
}
/**to create text ontop of triangle **/
div.arrow-text {
position: absolute;
left: 50%;
margin-left: -1.25%;
top: -8%;
color: grey;
font-size: 20px;
z-index: 10;
}
And the html I am using (raw html within a wordpress visual composer page section - which may be part of the problem as well since it is the preceding page section's background which is covering the number):
<div class="arrow-down-tan"></div>
<div class="arrow-text">3</div>
Any help would be greatly appreciated. Many thanks!
Not sure if this will work perfectly in mobile..
https://jsfiddle.net/Hastig/n2w9pv08/
css
.d-arrow {
position: absolute;
left: 46%;
width: 0px;
height: 0px;
border-style: solid;
border-width: 40px 30px 0px 30px;
border-color: #CCCCCC transparent transparent transparent;
/* background-color: red; */
}
.d-arrow-text {
position: relative;
margin: -35px 0px 0px -7px;
padding: 0px 0px 0px 0px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
font-size: 20px;
line-height: 20px;
color: #000000;
text-shadow: none;
}
html
<div class="d-arrow">
<div class="d-arrow-text">3</div>
</div>
div.arrow-down-tan {
position: relative;
margin-left: -55px;
margin-top: 0;
padding: 0;
z-index: 2;
}
div.arrow-down-tan:after {
width: 0;
height: 0;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
border-top: 35px solid red;
position: absolute;
left: 50%;
margin-left: -55px;
margin-top: 0;
padding: 0;
z-index: 2;
content:"";
}
/**to create text ontop of triangle **/
div.arrow-text {
position: absolute;
left: 49.5%;
top: 0;
color: white;
font-size: 20px;
z-index: 10;
}
<div class="arrow-down-tan"><div class="arrow-text">3</div></div>
I'm trying to create the following tooltip (not the contents within - just the box & arrow):
I'm having an issue getting the arrow to blend in correctly with the main box.
I created a Fiddle here with the code I have so far.
You will notice the arrow looks ok but just doesn't fit in 100%, I'm not sure how to finish it.
Below is the arrow code:
.arrow_box:after, .arrow_box:before {
border: 11px solid;
border-color: inherit;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom: 100%;
}
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #f3f3f3;
border-width: 13px;
margin-left: -23px;
}
.arrow_box:before {
border-color: rgba(194, 225, 245, 0);
border-bottom-color: #e1e1e1;
border-width: 15px;
margin-left: -25px;
}
http://jsfiddle.net/9uppsLqa/5/
.arrow_box {
border-radius: .1875em;
z-index: 99;
position: relative;
box-shadow: 0 0 0 1px rgba(0,0,0,0.15),inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 2px -2px rgba(0,0,0,0.2),0 0 1px 1px rgba(0,0,0,0.15);
background-repeat: repeat-x;
background-position: 0 0;
background-image: linear-gradient(to bottom,rgba(255,255,255,0.7) 0,rgba(255,255,255,0) 100%);
background-color: #e1e1e1;
margin-top: 3em;
margin-left: .75em;
margin-right: .75em;
padding-left: 0;
padding-bottom: 0;
padding-right: 0;
padding-top: 0;
width: 340px;
height: 160px;
}
.arrow_box:after, .arrow_box:before {
border: 13px solid transparent;
position: absolute;
content: '';
left: 90%;
bottom:100%;
}
.arrow_box:after {
border-bottom-color: #fafafa;
border-width: 14px;
margin-left: -24px;
}
.arrow_box:before {
border-bottom-color: #999;
border-width: 15px;
margin-left: -25px;
}
How would I define the degree of an arrow created with css follows
<div class="bubble"></div>
.bubble
{
background: none repeat scroll 0 0 #FF7401;
border: 3px solid silver;
border-radius: 25px;
bottom: 18px;
float: right;
height: 63px;
margin-right: 10px;
padding: 0;
position: relative;
width: 250px;
}
.bubble:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 29px 16px 0;
border-color: #ff7401 transparent;
display: block;
width: 0;
z-index: 1;
bottom: -29px;
left: 47px;
}
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 31px 18px 0;
border-color: silver transparent;
display: block;
width: 0;
z-index: 0;
bottom: -34px;
left: 45px;
}
div.bubble p {
color: #FFFFFF;
font-size: 21px;
font-weight: bold;
margin-top: 10px;
text-align: center;
}
http://jsfiddle.net/lgtsfiddler/GpUpZ/1/
What I want is that the arrow's right edge right should be longer and not equal to the left edge. In particular, the left edge should be perpendicular to the text-bubble, and the right edge should come to meet it. For better visualization, here is an example of what I'm trying to achieve:
Modify your css as like this
.bubble:before
{
content: '';
position: absolute;
border-style: solid;
border-width: 33px 18px 0; // modify this line
border-color: silver transparent;
/* display: block; */ // remove this line
width: 0;
z-index: 0;
bottom: -27px; // modify this line
left: 50px;
-webkit-transform: rotate(-108deg) skew(11deg,-10deg); // modify this line
}
Demo
The shape and direction of the arrow is determined by the individual border widths and colors
A simple adjustment of individual values makes it easy to experiment. It's often also useful to write out the individual values for both widths and colors so see what's what.
JSfiddle Demo
CSS
.bubble {
background: none repeat scroll 0 0 #FF7401;
border: 3px solid silver;
border-radius: 25px;
bottom: 18px;
height: 63px;
margin: 50px;
padding: 0;
position: relative;
width: 250px;
}
.bubble:after {
content: '';
position: absolute;
border-style: solid;
display: block;
width: 0;
z-index: 1;
top:100%;
left: 47px;
}
.bubble.one:after { /* straight left side */
border-width: 29px 29px 29px 0;
border-color: #ff7401 transparent transparent transparent;
}
.bubble.two:after { /* straight right side */
border-width: 29px 0px 29px 29px;
border-color: #ff7401 transparent transparent transparent ;
}