This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 7 years ago.
I want to achieve something like this on the hover state of the menu element:
I cannot achieve it with :after border property for some reasons, maybe lack of knowledge.
Here you can see what I have so far.
As you can see my :before selector is not perfectly aligned with the a tag and I don't have the nice isosceles triangle. Do you think it would be easier with background image?
I hope this can help you
body {
margin: 0;
background-color: aqua;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: right;
}
a {
color: #ccc;
display: inline-block;
padding: 5px 20px 5px 15px;
text-decoration: none;
text-transform:uppercase;
position: relative;
}
a.active, a:hover {
background-color: crimson;
color: white;
}
a.active::before,
a:hover::before,
a.active::after,
a:hover::after
{
position: absolute;
left: -15px;
content: " ";
width: 0;
height: 0;
border-style: solid;
}
a.active:before,
a:hover:before {
border-width: 0 15px 15px 0;
border-color: transparent crimson transparent transparent;
top: 0;
}
a.active:after,
a:hover:after {
border-width: 0 0 15px 15px;
border-color: transparent transparent crimson transparent;
bottom: 0;
}
<ul class="menu-container">
<li>home</li>
<li>about</li>
<li>video</li>
<li>edit</li>
<li>logout</li>
</ul>
You can use the :before selector as you stated in your question and mix it with some absolute positioning and you get the effect you require.
This will obviously need a bit more cleaning up to get it to your liking but this is a good general starting point.
ul {
float: right;
text-align: right;
}
li {
list-style: none;
padding: 5px;
}
li:hover {
background: red;
position: relative;
}
li:hover:before {
content: '';
position: absolute;
top: 0;
left: -10px;
border-top: 14px solid red;
border-bottom: 14px solid red;
border-left: 10px solid transparent;
}
<ul>
<li>Test</li>
<li>Test</li>
<li>Test</li>
<li>Test</li>
</ul>
Related
This question already has answers here:
How do CSS triangles work?
(23 answers)
How to create a transparent triangle with border using CSS?
(9 answers)
Closed 3 years ago.
Basically I have this layout and I'm trying to make the triangle with border appear on hover.
ul {
background: #ccc;
padding: 20px;
}
ul li {
display: inline-block;
padding: 20px;
}
ul a {
text-decoration: none;
}
ul li:hover a {
border-bottom: 1px solid white;
}
<ul>
<li>About</li>
<li>shop</li>
<li>contact</li>
</ul>
You can use css pseudo element to achieve this.
check snippet.
ul {
background: #ccc;
padding: 20px;
}
ul li {
display: inline-block;
padding: 20px;
position: relative;
}
ul a {
text-decoration: none;
}
ul li:hover a {
border-bottom: 1px solid white;
}
ul li:hover a:after {
content: '';
position: absolute;
bottom: 15px;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 5px #fff;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
}
<ul>
<li>About</li>
<li>shop</li>
<li>contact</li>
</ul>
ul {
background: #ccc;
padding: 20px;
}
ul li {
display: inline-block;
padding: 20px;
position: relative;
}
ul a {
text-decoration: none;
}
ul li:hover a {
border-bottom: 1px solid white;
position: relative;
}
ul li:hover a::after {
position: absolute;
content: "";
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid white;
left: 39%;
top: 18px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li>About</li>
<li>shop</li>
<li>contact</li>
</ul>
</body>
</html>
Is there any possibility to enable the :hover css effect also on the "margin area" of an object? I found a dirty solution working with an extra div inside, but is there something more elegant for this simple structure:
<ul>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
</ul>
CSS
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
margin: 5px 100px;
background-color: #f1f1f1;
}
li:hover a {
color: red;
}
#dirty {
padding: 0px 100px;
margin: 0px -100px;
}
Hey is my working dirty example: https://jsfiddle.net/equalsound/wn4ctxvh/
If possible, a css only solution would be lovely.
As asked in the comments to your question, here is a working answer, using pseudo-elements to fill the 100px side margin:
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
position: relative;
margin: 5px 100px;
background-color: #f1f1f1;
}
li::before,
li::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
li::before {
right: 100%;
}
li::after {
left: 100%;
}
li:hover a {
color: red;
}
<ul>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
</ul>
Just for fun, an alternative using transparent borders that's a little less practical due to the use of background-clip: padding:
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
margin: 5px 100px 5px 0;
border-left: 100px solid transparent;
background-clip: padding-box;
background-color: #f1f1f1;
}
li:hover a {
color: red;
}
<ul>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
</ul>
Although, you can obviate the need for that if you can afford to make the a elements blocks and apply the background color to them instead:
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li {
margin: 5px 100px 5px 0;
border-left: 100px solid transparent;
}
li a {
display: block;
background-color: #f1f1f1;
}
li:hover a {
color: red;
}
<ul>
<li><a>Hello</a></li>
<li><a>Hello</a></li>
</ul>
Not sure if that is what you are aiming for, but maybe it could help:
https://jsfiddle.net/wn4ctxvh/2/
<ul>
<li>
<div>
<a>Hello</a>
</div>
</li>
<li>
<div>
<a>Hello</a>
</div>
</li>
</ul>
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
li div {
margin: 5px 100px;
background-color: #f1f1f1;
}
li:hover a {
color: red;
}
The styling I look into achieving can be shown in this screenshot:.
Please tell how to create the effect that i pointed out using CSS.
a{
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
This should work for links, however the effect in the picture seems to be made with the link's container border:
div.yourcontainer:hover{
border-bottom:2px solid red;
}
This should work ^^
By using :hover and setting a border-bottom. Something like this
ul{
list-style: none;
padding: 0;
margin: 0;
}
ul li{
float: left;
margin: 0 5px;
}
ul li a{
text-decoration:none;
color: black;
}
ul li:hover{
border-bottom: 2px solid red;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
a {
display: inline-block;
position: relative;
text-decoration: none;
text-align: center;
}
a:hover:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
box-shadow: inset 0 -10px 0 #11c0e5;
}
a span {
display: block;
width: 100px;
height: 40px;
background-color: red;
padding-top: 20px;
}
<a href="#">
<span>link texts</span>
</a>
How do I make an pointed border-radius as the example in the img?
I have found several ways to make a full arrow to the right or left, but I want only an border of 1px.
I have built this in an UL and than an LI. This is because I think that this is the best way to generate this "breadcrumb".
<ul>
<li>Back</li>
<li>Home</li>
<li>Events</li>
<li>Event Item</li>
</ul>
You cannot do it using border-radius, you have to use :after ,:before pseudo elements.
There might be another approaches as well , but this is one method that i use personally.
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 65px;
background: #03C9A9;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #03C9A9;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
<ul class="breadcrumb">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
Check out the JSfiddle showing what I am up to: http://jsfiddle.net/Amp3rsand/FPj3s/1/
HTML:
<ul id="navigation">
<li>BLAH</li>
<li>MORE <br /> BLAH</li>
<li>STILL <br /> MORE</li>
<li>YADDA <br /> YADDA</li>
<li>ETC ETC <br /> ETC ETC</li>
<li>FINISH</li>
</ul>
CSS:
body {
font-size: 12px;}
}
#navigation {
width: 600px;
height: 50px;
position: absolute;
left: 20px;
top: 25px;
}
#navigation li {
list-style-type:none;
width: 94px;
height: 40px;
display: block;
float: left;
margin: 0 5px 0 0;
text-align: center;
font-weight: bold;
background: lightgrey;
}
#navigation li:first-child {
border-top: 40px solid lightgrey;
border-left: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:first-child a {
position: relative;
top: -35px;
right: 0px
}
#navigation li:last-child {
border-top: 40px solid lightgrey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:last-child a {
position: relative;
top: -35px;
left: 5px;
}
#navigation li:last-child a:hover {
top: -35px;
left: 5px;
}
#navigation li a {
display: block;
height: 40px;
text-decoration: none;
color:#000;
}
#navigation li a:hover {
background: grey;
}
The lightgrey shapes are what I would like the hover to look like. Only the first and last children need to look different but I am unsure of how to go about messing with the borders on hover without ruining the layout. I have had to move the first and last 'a' elements because of the border shenanigans and now I'm stuck.
What would you suggest?
EDIT:
I just realised I could do this to change the shape of the hover bit but the link position is still causing trouble
#navigation li:last-child a:hover {
border-top: 40px solid grey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
See it live here on JS Fiddle
The properties you want to change are of the <li> elements so target the list items hover state and change the background and border color
#navigation li:hover {
background: grey;
}
#navigation li:first-child:hover,
#navigation li:last-child:hover{
background: none;
border-top-color: grey;
}
Updated fiddle
Essentially, you want to set the 'border-top' to grey for the first/ last child.
You could use in CSS:
#navigation li:first-child:hover {
border-top: 40px solid lightgrey;
}
But this didn't work in Google Chrome, for me, so perhaps just apply that as a hover effect using jQuery?