I have a triangle made with CSS for a dropdown menu.
HTML:
<span class="top-link link-bar-link">Affiliate Content
<span class="caret"></span>
</span>
CSS:
#top-links-bar{
padding:30px;
border:0px solid black;
background: linear-gradient(gray, white);
}
.caret{
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid black;
display:inline;
}
The triangle is showing up, but it's above the text instead of next to it, as I intended.
.caret {
...
display: inline-block;
vertical-align: top; /* or 'middle' */
margin-top: 5px;
}
Demo
FIDDLE:
Try this:
CSS:
#top-links-bar {
padding:30px;
border:0px solid black;
background: linear-gradient(gray, white);
}
.top-link {
position:relative;
}
.caret {
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid black;
display:inline-block;
vertical-align:middle;
}
Related
I have a button with border on the right and the bottom, when I hover that, both border is hidden, and show border on the top and the left with color same as background-color on parent that button, i want to make like a 3D button effect, but its not working.
Here's look like my button when i hover it
What i want is the border-color is red, and if the parent background-color is green the border-color is green
And here's my code
.cta {
display: inline-block;
padding: 10px 30px;
font-family: 'courier new' !important;
font-size: 19px !important;
background: #1d85bf;
color:#fff;
border:3px solid #0b527a;
border-top:0;
border-left: 0;
border-radius:3px;
text-transform:uppercase;
display: block;
overflow: hidden;
white-space: nowrap;
}
.cta:hover {
border:3px solid #dbdbdb;
border-color:inherit !important;
border-bottom: 0;
border-right: 0;
border-top-left-radius: 3px !important;
color:#fff;
}
Here's my fiddle https://jsfiddle.net/evpsthx3/
Problem is your parent has no border color set. So just set the border color to the parent. Something like this: https://jsfiddle.net/evpsthx3/9/
<div class="parent red">
<a class="cta">BUTTON</a>
</div>
<div class="parent green">
<a class="cta">BUTTON</a>
</div>
.parent.red {
background-color: red;
border-color: red;
}
.parent.green {
background-color: green;
border-color: green;
}
You can give that effect by adding the below css code, Hope it wrks.
.cta:hover {box-shadow: #000 5px 5px 5px;}
you can try this one:
.parent {
width:300px;
height:60px;
padding:30px;
}
.cta {
display: inline-block;
padding: 10px 30px;
font-family: 'courier new' !important;
font-size: 19px !important;
background: #1d85bf;
color:#fff;
border:3px solid #0b527a;
border-top:0;
border-left: 0;
border-radius:3px;
text-transform:uppercase;
display: block;
overflow: hidden;
white-space: nowrap;
}
.cta:hover {
border:3px solid #dbdbdb;
border-color:inherit !important;
border-bottom: 0;
border-right: 0;
border-top-left-radius: 3px !important;
color:#fff;
box-shadow: #242729 6px 6px 6px;
}
DEMO HERE
How can I create Triangle with white border using CSS? Like the image below.
when i add this css
.triangle {
width:0;
height:0;
border-top: 20px solid transparent;
border-left: 20px solid white;
border-bottom: 20px solid transparent;
position:relative;
}
.triangle:before {
content:'';
width:0;
height:0;
border-top: 10px solid transparent;
border-left: 10px solid red;
border-bottom: 10px solid transparent;
position:absolute;
top:-10px;
left:-17px;
}
result is
CSS:
.triangle {
width:0;
height:0;
border-top: 20px solid transparent;
border-left: 20px solid white;
border-bottom: 20px solid transparent;
position:relative;
}
.triangle:before {
content:'';
width:0;
height:0;
border-top: 10px solid transparent;
border-left: 10px solid red;
border-bottom: 10px solid transparent;
position:absolute;
top:-10px;
left:-17px;
}
HTML:
<div class="triangle"></div>
Fiddle
I have the following HTML:
<div id="pager">1
2
3<span class="elip">...</span>
4</div>
And CSS:
.elip
{
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
}
#pager a{
BORDER-BOTTOM: #E6E6E6 1px solid;
BORDER-TOP: #E6E6E6 1px solid;
BORDER-RIGHT: #E6E6E6 1px solid;
BORDER-LEFT: #E6E6E6 1px solid;
color: #585858;
padding: 7px;
padding-top:30px;
text-decoration: none;
color: #808080;
}
No matter what I do, I cannot get the '...' to be aligned down the bottom at the bottom. When testing in JSFiddle, all works, but not outside it as the shot below (red X is what it is, green tick is what I would like):
Padding, text size, alignment, line height, nothing seems to work.
Try this:
.elip {
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
position:relative;
bottom:-10px;
}
You could use relative positioning, I also cleaned up your css a bit: http://jsfiddle.net/ptriek/LfUDB/2/
.elip {
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
}
#pager a {
border: #E6E6E6 1px solid;
color: #808080;
padding:30px 7px 7px 7px;
text-decoration: none;
}
#pager span {
top: 9px;
position:relative;
}
I am trying to make something like an horizontal label:
But there is a condition, should be an unique div. Probably with canvas is possible, however i have preference by css.
#msg {
border-bottom: 10px solid transparent;
border-right: 10px solid red;
border-top: 10px solid transparent;
height: 0;
width: 100px;
background-color: rgba(0,0,0,.8); margin-left:20px;
}
demo
You can accomplish this with some border hacks, positioning, and the :before psudo-element.
http://jsfiddle.net/VQcyD/
#msg {
width:100px;
height:40px;
background:red;
margin-left:40px;
position:relative;
}
#msg:before {
content:"";
position:absolute;
border-bottom: 20px solid transparent;
border-right: 20px solid red;
border-top: 20px solid transparent;
height: 0px;
width: 0px;
margin-left:-20px;
}
How can I create a "Contact Us" hyperlink as the one present on the top-right of this page?
I am particalarly interested on the balloon style.
They use simple html for the link and css to show rounded corners and an arrow.
Contact Us<span class="arrow"><span></span></span>
li.contactus a {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #EBE9D9;
border:1px solid #FFFFFF !important;
color:#4C4632 !important;
display:block;
float:left;
font-size:1.3em;
font-weight:bold;
line-height:1;
margin:0;
padding:0.4em 0.7em 0.6em 1.2em;
text-decoration:none;
text-shadow:1px 1px 0 #FFFFFF;
width:6em;
}
li.contactus a span.arrow {
border-left:0 none;
border-right:16px dashed transparent;
border-top:11px solid #FFFFFF;
bottom:-11px;
left:8px;
right:auto;
}
li.contactus a span span {
border-left:0 none;
border-right:14px dashed transparent;
border-top:10px solid #EBE9D9;
bottom:auto;
left:1px;
top:-12px;
}
li.contactus a span {
background:none repeat scroll 0 0 transparent;
border-bottom-width:0;
display:block;
height:0;
position:absolute;
width:0;
}
Since that is static, I would just use an <img> for this.
If you check the html and css in for that balloon you'll get your answer:
html:
<ul><li class="contactus">Contact Us<span class="arrow"><span></span></span></li></ul>
css:
li.contactus a span.arrow {
border-left:0 none;
border-right:16px dashed transparent;
border-top:11px solid #FFFFFF;
bottom:-11px;
left:8px;
right:auto;
}
li.contactus a span {
background:none repeat scroll 0 0 transparent;
border-bottom-width:0;
display:block;
height:0;
position:absolute;
width:0;
}
li.contactus, #home_nav li.contactus {
float:none;
font-size:1em !important;
margin:0;
overflow:visible !important;
padding:0;
position:absolute !important;
right:20px;
top:-0.5em;
width:10em;
z-index:99999;
}
li.contactus a {
-moz-border-radius:5px 5px 5px 5px;
background:none repeat scroll 0 0 #EBE9D9;
border:1px solid #FFFFFF !important;
color:#4C4632 !important;
display:block;
float:left;
font-size:1.3em;
font-weight:bold;
line-height:1;
margin:0;
padding:0.4em 0.7em 0.6em 1.2em;
text-decoration:none;
text-shadow:1px 1px 0 #FFFFFF;
width:6em;
}