I'm trying to create a shape in menu header which indicates that is selected (active class), but I can't bring the shape up and align it.
This is what I've tried:
HTML
<li class="active">Market</li>
CSS
.active {
z-index: -1;
position: absolute;
border-bottom: 2px solid #b6ff00;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
EXPECTED RESULT:
JSFIDDLE: http://jsfiddle.net/Q2Dra/
You're on the right track with the border. You just needed to apply it to a pseudo element instead of the li.
Full Example:
http://jsfiddle.net/Q2Dra/4/
Relevant Code:
.active:after {
content:'';
border:10px solid transparent;
border-bottom:10px solid #b6ff00;
position:absolute;
bottom:0;
left:50%;
margin-left:-10px;
}
You need to use a psuedo element: http://jsfiddle.net/webbymatt/QL7Qr/
HTML
Home
CSS
a {
position: relative;
background: red;
padding: 6px 10px;
}
a:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content: " ";
position: absolute;
bottom: 0;
left: 50%;
margin-left: -5px;
}
Related
So I want to create a button that looks like this when it's active (you can see that it has a little arrow pointing to the right)
Currently I have something like that, it stays blue after clicked, text turns white and all that. I used .addClass for that, but I have no idea if I should use it again to glue on a triangle onto my button, there has to be a better way right?
While I'm at it, how can I make the shadow/sidebar?
Please, experienced people, give this beginner some enlightenment
add below css for
.active {
height: 50px;
width: 100px;
background: blue;
height: 50px;
width: 100px;
background: blue;
position: relative;
}
.active:after {
content: "";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid black;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<div class="active"></div>
try
.active {
height: 50px;
width: 200px;
background: #0092ff;
}
.active:after {
content: "";
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #0092ff;
display: block;
margin-left: 200px;
transform: translateY(75%);
}
.active:hover:after {
content: "";
border-left: 0px solid #0092ff;
transition: border-left 0.2s ease-in;
}
<div class="active"></div>
Please Check following working example.
$(function() {
$('.btn').click(function() {
$(this).closest('ul').find('.active').removeClass('active');
$(this).addClass('active');
});
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
padding: 10px;
background: teal;
position: relative;
display: block;
width: 60px;
cursor: pointer;
}
.active::after {
content: " ";
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid teal;
height: 0;
width: 0;
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a class="btn active">Home</a></li>
<li><a class="btn">News</a></li>
<li><a class="btn">Contact</a></li>
<li><a class="btn">About</a></li>
</ul>
you need to add position:relative to the selector ul li.
after that, you can use the following code below to add content through the pseudo element after of the active link.
change the size of the borders, as well as positions for top and right to suit your needs.
ul li.active:after {
content: "";
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #0092ff;
position:absolute;
top: 15px;
right:-15px;
}
I'm following the example at http://bootsnipp.com/snippets/featured/simple-vertical-tab. I'm not quite able to figure out how to modify the size of the arrow mark that points towards the right when a menu item is selected.
Could I please request help to identify the element in question in the CSS?
You need to open ::after inside <a> element. And then you can change the value of borders.
for example
div.bhoechie-tab-menu div.list-group>a.active:after {
content: '';
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px;
border-left: 0;
border-bottom: 13px solid transparent;
border-top: 13px solid transparent;
border-left: 57px solid #5A55A3;
}
Change border value according to your needed.
CSS:
div.bhoechie-tab-menu div.list-group > a.active::after {
content: "";
position: absolute;
left: 100%;
top: 50%;
margin-top: -13px; //change as your needed
border-bottom: 13px solid transparent; //change as your needed
border-top: 13px solid transparent; //change as your needed
border-left: 10px solid #5A55A3; //change as your needed
}
i am working to create error message similar to Facebook signup page error message as shown bellow
i have tried and got the rectangular box as here
but i dont know how to get arrow pointed to my particular text ,as shown in Facebook.
my css class
.nameAndNumReq {
color:red;
width:100px;
left:180px;
top:10px;
font-size:small;
padding-top:2px;
padding-bottom:2px;
position: absolute;
border: 1px solid red;
background-color: white;
border-radius: 2px;
}
Take a look at the demo;
Also, google 'css triangle' technique to understand the working of the arrows. Example: http://css-tricks.com/snippets/css/css-triangle/
.bar {
position: relative;
background: #C03737;
border: 1px solid #830303;
width: 100px;
height: 40px;
border-radius: 5px;
}
.bar:after, .bar:before {
position: absolute;
content: "";
width: 0;
height: 0;
top: 50%;
}
.bar:before {
right: -8px;
margin-top: -8px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #830303;
}
.bar:after {
right: -7px;
margin-top: -7px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-left: 7px solid #C03737;
}
I am trying to remove oblique border issue, best to show it in a picture:
Here is the css applied to the div:
.blog_post {background: #fff}
.blog_post .post {
border-right-color: #F1F1F1;
border-top-color: #FF0000;
}
.blog_post .post, .blog_post .sidebar {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #FFFFFF;
border-width: 10px;
}
.blog_post .post {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 #9A9570;
border-color: #8F8960 #8F8960 -moz-use-text-color;
border-image: none;
border-style: solid;
border-width: 10px;
float: left;
margin: -560px 0 0 -12px;
padding: 28px 30px;
position: relative;
width: 528px;
z-index: 9;
}
Any help would be greatly appreciated.
Easy way: Another container
You can't do this with traditional HTML borders as they work at shown above (that's how CSS triangles work!). The easiest way to get this effect is to wrap the element in another container.
Demo
HTML
<div class="container">
<div class="inner-container">
...
</div>
</div>
CSS
.container {
border-top:10px solid red;
border-bottom:10px solid red;
}
.inner-container {
border-left:10px solid blue;
border-right:10px solid blue;
}
Hard way: :before and :after
This method is a little more tricky but you can manage to pull it off with only one wrapping element.
Demo
HTML
<div class="container">
...
</div>
CSS
.container {
border-top:10px solid red;
border-bottom:10px solid red;
position:relative;
/* pad out the left and right to allow room for the border */
padding:0 10px;
}
.container:before,
.container:after {
position:absolute;
top:0;
bottom:0;
width:10px;
background-color:blue;
display:block;
content:"";
}
.container:before {
left:0;
}
.container:after {
right:0;
}
You can always use inset box shadows. They are pretty easy to use, and they don't require much CSS, nor do you have to change the HTML.
Check it out. jsFiddle here
div {
box-shadow: inset 0px 10px 0px red;
border: 10px solid blue;
border-top: 0px;
}
Using pseudo-classes :before and :after
.border-fixed {
width: 300px;
height: 300px;
background: #EEE;
margin: 60px auto 0;
border: solid 10px #DDD;
border-top-color: #BBB;
position: relative;
}
.border-fixed:before,
.border-fixed:after {
content: "";
top: -10px;
left: -10px;
position: absolute;
width: 10px;
height: 10px;
background: #BBB;
}
.border-fixed:before {
right: -10px;
left: auto;
}
I have the following CSS for a div element:
.tooltip
{
padding: .8em;
width: 12em; background:#999;
border-width: 2px !important;
border-color:#999;
position:absolute;
}
.tooltip .pointer, .tooltip .inner-pointer
{
position:absolute;
width:0;
height:0;
border-bottom-width: 0;
background: none;
}
.tooltip .pointer {
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 14px solid #999;
bottom: -14px;
right: auto;
left: 5%;
margin-left: -7px;
}
.tooltip .inner-pointer {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #999;
bottom: auto;
top: -14px;
left: -5px;
}
Here is the DIV info
<div class="tooltip">Tooltip content goes here...<div class="pointer"><div class="inner-pointer"></div></div></div>
It the line below it, however cuts into the bottom of this tooltip, how do I make sure that it takes up all the space it is supposed to?
Here is an example in a jsFiddle:
http://jsfiddle.net/WEgBW/1/
Assuming that the problem is that something overlaps your tooltip, then you should add a z-index on the .tooltip
.tooltip
{
padding: .8em;
width: 12em; background:#999;
border-width: 2px !important;
border-color:#999;
position:absolute;
z-index: 999; /* added this line */
}