My code is very simple, but I'd like to move the css3 triangle to the middle of the text "click". could someone please help me?
**HTML**
<li>click</li>
**CSS**
li{list-style:none; }
.arrow{
width: 0px;
height: 20px;
border-style: solid;
display:block;
border-width: 0 5px 8px 5px;
border-color: #000 transparent;
}
ONLINE CODE: http://jsfiddle.net/8rRyf/
I'm not sure if there is a way to position borders, but something like this should do the trick.
li{list-style:none; }
a {
display: block;
width: 40px;
}
.arrow{
position: relative;
width: 0px;
height: 0px;
margin: 0 auto;
border-style: solid;
display:block;
border-width: 0px 5px 8px 5px;
border-color: #000 transparent;
}
<li>click<span class="arrow"> </span></li>
http://jsfiddle.net/8rRyf/19/
I dont want to add any extra element, so far this is the only way could figure it out.
Added text-indent in li did the trick!
li{list-style:none; margin-left:20px; text-indent: -8px;}
.arrow{
width: 0px;
height: 20px;
border-style: solid;
display:block;
border-width: 0 5px 8px 5px;
border-color: #000 transparent;
}
http://jsfiddle.net/8rRyf/24/
Related
I'm trying to make some triangles but it ain't working like I want to, look at this:
<th>Rent <div class="triangle-up"></div></th>
With this CSS:
.triangle-down {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 6px 0 6px;
border-color: #FFF transparent transparent transparent;
display: inline-flex;
}
.triangle-up {
width: 0;
height: 0;
border-style: solid;
border-width: 0 6px 5px 6px;
border-color: transparent transparent #FFF transparent;
display: inline-flex;
}
th {
text-align: left;
text-shadow: -1px -1px #000000;
background-image: -webkit-linear-gradient(top, #222222, #161717);
height: 20px;
padding: 7px;
}
This is the result:
As you can see, when using triangle-up it is not aligned with the text, which I want it to.
What can I do?
How about adding vertical-align: middle; to both the triangle-up and triangle-down selectors?
Ok the tags you are using in incorrect. Since you are using display:inline-flex I am assuming you dont care about earlier ie versions.
The best way to vertically align something is
position:absolute; top:50%; transform:translateY(-50%);
Check out this fiddle
I am trying to make the active list item look like this:
This is what I currently have (the blue triangle is a right triangle instead of an obtuse isosceles):
Here is my HTML:
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law<span class="activePointer"></span></li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
Here is my CSS:
.guideList{
font-size: 12px;
line-height: 12px;
font-weight: bold;
list-style-type: none;
margin-top: 10px;
width: 125px;
}
.guideList li{
padding: 5px 0px 5px 10px;
}
.guideList .active{
background-color: #0390d1;
color: white;
}
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 11px solid transparent;
border-bottom: 11px solid white;
}
jsFiddle
How do I fix this?
ETA I tried #jlbruno's idea (decreasing the size of the left border), but when I do that the lines of the triangle are not sharp:
ETA Using transform:rotate fixed the edges (thank you #jlbruno!)...but not for IE8. I tried using the microsoft matrix transform filter (related SO question) but it didn't help. How do I get this to work in IE8 also?
Here is the CSS I tried for IE8:
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9999996192282494, M12=-0.0008726645152362283, M21=0.0008726645152362283, M22=0.9999996192282494, SizingMethod='auto expand')";
Change the border-left on .guideList .activePointer to something like 7px instead of 11... the more you drop that value, the wider the angle will get.
.guideList .activePointer{
margin-top: -5px;
margin-bottom: -5px;
float: right;
display: inline-block;
width: 0px;
height: 0px;
border-top: 11px solid white;
border-left: 7px solid transparent;
border-bottom: 11px solid white;
-webkit-transform: rotate(0.05deg); // added to smooth edges in Chrome
}
Since CSS is not giving you the desired result, you may have to do a right-aligned background image for this one.
HTML
<ul class="guideList">
<li><a>Consulting</a></li>
<li class="active">Law</li>
<li><a>Finance</a></li>
<li><a>Technology</a></li>
</ul>
CSS
.guideList .active{
background: url('images/right-arrow.png') #0390d1 center right no-repeat;
color: white;
}
you can use this html And Css for this :
Css:
.Rectangular{
width: 100px;
height: 30px;
text-align: left;
position: relative;
background-color: #0390D1;
color: #fff;
padding-left: 10px;
font: 12px/30px tahoma;
margin-right: 100px;}
.Rectangular>span{
display: inline-block;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #0390D1;
border-left: 30px solid #0390D1;
border-right: 30px solid rgba(0, 0, 0, 0);
border-style: solid;
border-width: 15px;
position: absolute;
right: -29px;
top: 0;
}
HTML :
<div class="Rectangular">Law <span></span></div>
I have a little problem with CSS 3, namely I would create such an object with a single item.
Here's an image of what I want to achieve:
Here's what have I:
CSS:
body{
background:grey;
padding:10px;
}
#talkbubble {
margin:0 auto;
box-shadow: 3px 10px 7px #deefe5;
width: 590px;
height: 160px;
background: white;
position: relative;
border-radius:10px;
border-bottom-left-radius:0px;
}
#talkbubble:before {
box-shadow: 10px 10px 5px #deefe5;
content:"";
position: absolute;
background:white;
top: 100%;
width: 228px;
height: 62px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#talkbubble:after{
content:"";
position: absolute;
top:100%;
left:228px;
border-top: 10px solid white;
border-right: 10px solid transparent;
background:white;
}
HTML:
<div id="talkbubble"></div>
And a jsFiddle demo
How do I round off the angle between the two parts?
Taken information from here you can get this:
body
{
background:grey;
padding:10px;
}
#talkbubble
{
margin:0 auto;
box-shadow: 3px 10px 7px #deefe5;
width: 590px;
height: 160px;
background: white;
position: relative;
border-radius:10px;
border-bottom-left-radius:0px;
}
#talkbubble:before
{
box-shadow: 10px 10px 5px #deefe5;
content:"";
position: absolute;
background:white;
top: 95%;
width: 228px;
height: 62px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
#talkbubble:after
{
content:"";
position: absolute;
top:100%;
left:228px;
background:-webkit-radial-gradient(100% 100%, circle, rgba(204, 0, 0, 0) 10px, white 10px);
width: 10px;
height: 10px;
}
http://jsfiddle.net/uCRMQ/2
//Just the background shadow doesn't work.
Now background shadow works for this (at this size).
Lg
warappa
Short answer: you can't.
What you've done there has successfully created a box :after the DIV element, but if you start to enter text into the DIV it will not "flow" into the bottom section.
To achieve what you're aiming for in CSS3 you would need at least 3 DIVs and transparency effects, and you still would have the problem with text overflowing.
worx like a charm:
http://jsfiddle.net/42DJh/7/
just replace with this:
#talkbubble:after{
content:"";
position: absolute;
top:100%;
left:228px;
border-top: 10px solid white;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-top-left-radius:10px;
background:transparent;
box-shadow: -3px -3px 1px white;
}
I want to make a CSS only speech bubble. So far, I have this...
Example
CSS
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -15px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
jsFiddle.
...which is almost exactly what I want. However, I want a light border around the whole thing.
Obviously, on the main portion, that is simple as adding border: 1px solid #333 to the div.
However, as the tail of the bubble is a border hack, I can't user a border with it.
I tried setting a box shadow of 0 0 1px #333 but browsers apply the border to the rectangular shape of the element (which I guess is what they should do).
jsFiddle.
My next thoughts were finding a Unicode character that looks like a bubble tail and absolutely positioning it there, with text-shadow for the border and using z-index of the main bubble to hide the top shadow of the text.
What Unicode character would be suitable for this? Should I do something different? Do I need to resort to an image?
I only have to support Mobile Safari. :)
<div>Hello Stack Overflow!<span></span></div>
div span:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -51px;
margin-left: -15px;
border-width: 20px 20px 30px 20px;
border-style: solid;
border-color: #000 transparent transparent transparent;
}
http://jsfiddle.net/QYH5a/
For the Unicode character approach you suggested, the most appropriate would be ▼ U+25BC BLACK DOWN-POINTING TRIANGLE. I don't know whether iOS has glyphs for it.
Here is a similar solution:
http://jsfiddle.net/JyPBD/2/
<div>Hello Stack Overflow!<span></span></div>
body {
background: #ccc;
}
div {
position: relative;
background: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #333;
}
div:after {
content: "";
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: -60px;
margin-left: -16px;
border-width: 30px 20px 30px 20px;
border-style: solid;
border-color: green transparent transparent transparent;
}
div span
{
border-color: #FF0000 transparent transparent;
border-style: solid;
border-width: 25px 15px;
bottom: -51px;
margin-left: -65px;
position: absolute;
z-index: 10;
}
You could use the filter property with box-shadow() to do it...
-webkit-filter: drop-shadow(1px 1px 1px #111) drop-shadow(-1px -1px 1px #111);
jsFiddle.
I'm trying to make a "priority marker" in css. I have a couple of issues. First: the text is not centered reasonably at all. Second: I'd prefer the width (at least) to change dynamically with the length of the text. Is either doable?
result:
My understanding of how to pick a font that fits with in this context is beyond my current css skills. If this has been done I don't really care to reinvent this...
.box {
border-color: orange;
border-style: solid;
text-align: center;
border-width: 1px 0px 1px 1px;
margin: 0px 8px 0px 0px;
background-color: yellow;
padding-right: 8px;
position: relative;
height:14px;
width:20px;
}
.arrow {
border-color: transparent transparent transparent orange;
border-style: solid;
border-width: 8px;
position: absolute;
right: -15px;
bottom: -1px;
height:0;
width:0;
}
.arrow2 {
border-color: transparent transparent transparent yellow;
border-style: solid;
border-width: 7px;
position: absolute;
right: -12px;
bottom: 0px;
height:0;
width:0;
}
<div class="{style.box}">42
<div class="{style.arrow}"></div>
<div class="{style.arrow2}"></div>
</div>
Add this to .box:
font-size:12px;
font-family:serif;
display:inline-block;
padding-left:5px;
And remove its width rule.