I'm trying to add a triangle before a div in navigationTable using css, but I cant correctly match it with a div element.
Here's code
tmp tmp tmp
How solve this problem?
edit:
second problem: how to make edges of triangle smooth?
Absolute positioned element will be relative to the next parent element with relative (or absolute) positioning.
.elem{
color: dodgerblue;
font-weight: bold;
padding: 10px 20px;
position:relative; //YOU NEED THIS LINE
}
.elem:hover:before {
display: inline-block;
content: "";
top:0; //YOU NEED THIS LINE
width: 0;
height: 0;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent red transparent transparent;
left: -15px;
position: absolute;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
So what did you need. You need(ed) .elem to be relative, so that .elem:before could be positioned relative to that. You've also "forgot" to set top property (to 0).
Related
Hey I have a triangle in CSS created like so:
.triangleup {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
}
<h1>Here is a triangle<i class="triangleup"></i></h1>
I would like to change the y position of the triangle and move it up so the top of the triangle aligns with the top of the text. How would I go about doing this?
Try This:
.triangleup {
vertical-align: top;<----------Added
//More code.........
}
.triangleup {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
vertical-align: top;
}
<h1>Here is a triangle<i class="triangleup"></i></h1>
There are 2 ways you could do this, i.e. align triangle at top so that it level-up with remaining texts,
1st - By changing the position of .triangleup to position:relative and using top as negative value,
.triangleup {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
position:relative; /*Add this*/
top:-22px; /*Add this*/
}
<h1>Here is a triangle<i class="triangleup"></i></h1>
2nd - By changing the position of .triangleup to position:absolute and top:0, here you even need to change position of h1 to relative.
position:absolute - The element is removed from the normal document
flow; no space is created for the element in the page layout. Instead,
it is positioned relative to its closest positioned ancestor if any;
otherwise, it is placed relative to the initial containing block.
h1{
position:relative;
}
.triangleup {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
position:absolute;
top:0;
}
<h1>Here is a triangle<i class="triangleup"></i></h1>
You could try putting some margin on the bottom of the triangle
.triangleup {
margin-bottom: 10px;
}
margin-left:50px;
margin-top:50px;
This is used to set the position of the top left corner point of the triangle.
margin-bottom:10px;
This code in css will fix the issue
.triangleup {
position:absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
top:0px;
}
h1{
background-color:blue;
position:relative;
}
<h1>Here is a triangle<i class="triangleup"></i></h1>
Make your h1 element position:relative and traingleup class position:absolute.
Now it works.
Hope it help.
Other answers here give you some possibilities that will work with the specific example you've given, but may require adjusting the numbers a bit depending on your real-life font size and font family.
A more abstract solution that will give you roughly the correct alignment no matter the font is to use the CSS property meant specifically for this purpose: vertical-align: text-top.
Simply setting that property will automatically align the bottom of your triangle to the top of your text.
If you want to align the top of the triangle, you can then do what others have suggested and add relative positioning to the vertical alignment. Since your triangle is 10 pixels tall, you can use top: 10px (in conjunction with position: relative) to push the triangle down so its top will then align with the top of the text.
Final styles would look like this:
.triangleup {
width: 0;
height: 0;
border-style: solid;
border-width: 0 7.5px 10px 7.5px;
border-color: transparent transparent #58BE23 transparent;
display: inline-block;
vertical-align: text-top;
position: relative;
top: 10px;
}
Whether that gets the triangle to sit close enough to where you want it to or not will be the deciding factor on if you go this route or one of the routes others have presented. This method is, I think, more flexible at the expense of being slightly less precise.
You can align it with applying position. So the code will be:
.triangleup {
border-color: transparent transparent #58be23;
border-style: solid;
border-width: 0 7.5px 10px;
display: inline-block;
height: 0;
position: relative;
top: -3px;
width: 0;
}
https://jsfiddle.net/rijokpaul/hjx7q4kj/2/
I'm trying to mockup this design:
But, I can't render the red border correctly. I tried with the obvious solution:
border: 1px solid #939393;
border-left: 4px solid red;
But It's affected by the top and bottom borders, leaving the red stripe with diagonal corners, as you can see in this fiddle:
http://jsfiddle.net/anp0e03k/
Is there any way correct way to fix this?
The only thing that I can think is to add a div inside with red background and negative margins on top and bottom, but it seems to be an overkill and would love to find something that doesn't ruins the html semantic.
Apply the left border to a :before pseudo element of the div and remove the divs left border.
Compatibility: All modern browsers and IE8 +
Give the :before
height: 100% to span the entire height of your div
margin-top: -1px to overlap the top border
padding-bottom: 2px to overlap the bottom border
Then use either
position: absolute on the :before with position: relative on the div like this example:
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
position: relative;
}
div:before {
content: '';
display: block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
position: absolute;
top: 0;
left: 0;
}
<div>
</div>
or
display: inline-block for the :before like this example:
Note: You will probably want to use vertical-align: top / middle / bottom for the :before. This example uses the value top.
body {
background-color: #c2c2c2;
}
div {
margin: 50px;
background-color: #FFF;
border: 1px solid #939393;
height: 50px;
width: 200px;
border-left: none;
}
div:before {
content: '';
display: inline-block;
border-left: 4px solid red;
height: 100%;
margin-top: -1px;
padding-bottom: 2px;
vertical-align: top;
}
<div>
There is text in this
</div>
Final result
I'm trying to create this as below and couldn't finish it.
I can only manage to create a rounded corners on left but not slanted right.
(source: kerrydeaf.com)
#talkbubble
{
width: 100px;
height: 35px;
background: #FFCC05;
position: relative;
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
margin-right:50px;
}
Or here is
http://jsfiddle.net/alma/USezL/23/
i think this is what u are looking for http://css-tricks.com/snippets/css/css-triangle/
http://jsfiddle.net/zQKhb/
#talkbubble
{
width: 100px;
height: 36px;
background: #FFCC05;
position: relative;
-moz-border-radius:8px 0 0 8px;
-webkit-border-radius:8px 0 0 8px;
border-radius:8px 0 0 8px;
margin-right:50px;
}
#talkbubble:before
{
content:"";
display:block;
position: absolute;
right: -36px;
top:0;
width: 0;
height: 0;
border: 18px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;
}
You were missing some crucial points in your triangle on the right. First of all, by default a :before element is display: inline, so to create the effect you were seeking you needed display: block instead.
Second, the right: 120px was moving it 120 pixels away from the right side of its original position. That is, it was being pushed to the left, out of view. Instead, you needed a negative right position (move to the right) of 100% (the width of the speech bubble). That way, it'd end up to the right of it.
Third, not sure what shape you were going for but it was almost everything but a triangle ;).
I went for this instead:
#talkbubble:before
{
content:" ";
display: block;
position: relative;
right: -100%;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 20px solid transparent;
border-bottom: 35px solid #FFCC05;
}
The first part is for the positioning, the second part is creating the actual triangle (see http://css-tricks.com/snippets/css/css-triangle/).
In the jsfiddle I made the triangle blue so you can see exactly where it is. Change the border-right width to make the angle bigger. http://jsfiddle.net/USezL/31/
I'm trying to do something like this:
The boxes have shadows and the background of the corners must be transparent because they are over an image (unpredictable background).
After searching Google, I found solutions using pseudo selectors :before and :after as well as solutions using extra markup, but all of them use a fixed colour background. These were my results:
I'm trying to use box-shadows and only a small image for the corner, instead of a large complete background.
How I can do this?
Use both the pseudo-elements, one for the upper box, the other for the white triangle:
h1 {
background: #F0B032;
box-shadow: 1px 1px 4px #362708;
line-height: 30px;
position: relative;
}
h1:before, h1:after {
content: '';
position: absolute;
left: 100%;
}
h1:before {
background: #F0B032;
box-shadow: 1px 1px 2px #362708;
width: 15px;
height: 16px;
top: 0;
}
h1:after {
border: 7px solid transparent;
border-left-color: #fff;
border-top-color: #fff;
bottom: 0;
}
Here's the fiddle: http://jsfiddle.net/Kjp6v/
This does not add a shadow under the fold, but looks realistic enough.
I want to create an upward and downward facing arrow with css like the following: http://apps.eky.hk/css-triangle-generator/
However, instead of a solid color, I want to set it up so the inside is white and there is just a border around the triangle. (So the triangle would be multi-colored, one color on the inside and a different colored border).
Is this possible, and if so, how can it be done?
To create triangles with only CSS we use a zero width/height element with borders:
.arrow-up {
width : 0;
height : 0;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom : 50px solid black;
}
Since we are using borders to create the arrow, we can't just give it a border, but we can overlay one arrow on top of a slightly larger arrow to make the appearance of a border:
HTML --
<div class="top"></div>
<div class="bottom"></div>
CSS --
.top {
position : absolute;
top : 6px;
left : 10px;
width : 0;
height : 0;
z-index : 100;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom : 50px solid black;
}
.bottom {
position : absolute;
width : 0;
height : 0;
z-index : 99;
border-left : 60px solid transparent;
border-right : 60px solid transparent;
border-bottom : 60px solid red;
}
Here is a demo: http://jsfiddle.net/jasper/qnmpb/1/
Update
You can then put both of the triangle DIV elements inside a container and move that container however you want:
HTML --
<div id="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
CSS --
#container {
position : relative;
top : 25px;
left : 25px;
}
Here is a demo: http://jsfiddle.net/jasper/qnmpb/3/
EDIT (2014):
I just came back to this answer and noticed that separate HTML elements are not necessary to create your double-triangle. You can use pseudo-elements, :before and :after. I.e. replace the .top selector with something like .my-element-that-needs-a-triangle:before and the .bottom selector with something like .my-element-that-needs-a-triangle:after.
I think you could get a good idea of what to do by checking out this tutorial on pure css thought bubbles. It's doing what you're looking for.
http://www.sitepoint.com/pure-css3-speech-bubbles/
Depending on how you're using it, you can make a triangle, with a border and even box shadow, without the triangle border hack, using CSS transform: rotate(). See my answer here: https://stackoverflow.com/a/8867645/918414
If you want to create a triangle with borders (or box shadow look-alike) in pure CSS, you should use pseudo-elements :before and :after.
In my example, I added display:inline-block; to the element .arrow-dropdown to be able to create some kind of dropdown menu with a drop shadow. It is followed by .arrow-only which is a a basic triangle with a red border.
body {
margin: 10px;
background: #1670c4;
}
.text {
display: inline-block;
font-size: 15px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
cursor: default;
}
.arrow-dropdown {
display: inline-block;
position: relative;
vertical-align: middle;
margin: 1px 0 0 8px;
width: 8px;
height: 7px;
}
.arrow-dropdown:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 4px 0;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
}
.arrow-dropdown:before {
content: '';
position: absolute;
border-style: solid;
border-width: 8px 5px 0;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
display: block;
width: 0;
z-index: 0;
}
.arrow-only {
position: relative;
vertical-align: middle;
margin: 10px 0 0 8px;
width: 8px;
height: 7px;
}
.arrow-only:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 9px 0;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
}
.arrow-only:before {
content: '';
position: absolute;
border-style: solid;
border-width: 15px 11px 0;
border-color: #f00 transparent transparent transparent;
display: block;
width: 0;
z-index: 0;
margin:-1px 0 0 -2px;
}
<div class="text">
Dropdown text
</div><div class="arrow-dropdown"></div>
<div class="arrow-only"></div>