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>
Related
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;
}
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>
I'm trying to create menus for a webpage using HTML and CSS. When the menus are displayed those nasty bullets appear. I don't want them. How do I get rid of them?
Also, the submenus need to allow for variable length strings. I had to specify a width: 80px; property for the .dropdown li element. If I didn't, all the menus got squished together.
For the submenus, if I have a lengthy li like this:
<li>Most Popular Artists</li>
All that gets displayed is the word "Most".
So I need two things solved: Get rid of the bullets, and make the submenus handle variable length strings.
HTML:
<nav id="top_menu">
<img src="media/images/logo_large.jpg">
<ul class="dropdown">
<li class="dropdown_trigger">
NEWS
<ul>
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
<li>
<li class="dropdown_trigger">
SOCIAL
<ul>
<li>Subitem1</li>
<li>Subitem2</li>
<li>Subitem3</li>
<li>Subitem4</li>
</ul>
</li>
</ul>
</nav>
CSS:
#top_menu{
position: relative;
top:35px;
left: 90px;
width:660px;
height:55px;
background-color: black;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.dropdown {
background: black;
border: 1px solid black;
float: right;
padding: 1px 0 0 1px;
margin: 0 0 20px;
line-height: 55px;
}
.dropdown a {
background: black repeat-x;
border: 1px solid black;
border-top-width: 0;
color: white;
display: block;
line-height: 25px;
overflow: hidden;
text-decoration: none;
height: 25px;
}
.dropdown a:hover {
color: #30B3FF;
background: #666;
}
.dropdown ul a {
background: black;
}
.dropdown > li {
list-style: none;
position: relative;
text-align: left;
font: bold 12px Tahoma;
*display: inline-block;
width: 80px;
/* IE7 hack to make inline-block work right */
*zoom: 1;
display: inline;
}
.dropdown li.dropdown_trigger {
display: inline;
float: left;
margin: 0 0 0 -1px;
}
.dropdown ul {
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}
.dropdown ul {
display: none;
}
.dropdown li.dropdown_trigger:hover ul {
display: block;
}
You should add list-style-type: none; to your main ul CSS like so:
.dropdown ul {
list-style-type: none;
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}
.dropdown ul {
display: none;
}
And looking at that you can consolidate those two items & format them for readability as well:
.dropdown ul {
display: none;
list-style-type: none;
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}
And past that you can even add the !important to force an override:
.dropdown ul {
display: none;
list-style-type: none !important;
background: black;
border: 1px solid black;
border-top-width: 0;
position: absolute;
top: 26px;
left: -1px;
z-index: 9999;
}
Add list-style:none; to your unordered (bulleted) list to hide the default bullets. Apply this role to ul in this way you will not have to apply it to each ul.class every time.
ul {
list-style:none;
padding:0;
margin:0;
}
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?
I had a mouseover submenu working very nicely on my site (so nicely in fact that it was working exactly right in Chrome, IE 7 & 8, and FF), but now it's broken somehow and I can't see the problem.
Here's the CSS:
.MainMenu {
width: 90% !important;
min-width: 800px;
height: 42px !important;
padding: 0 0 0 10%;
overflow: hidden;
border-top: 1px solid #0054a6;
border-bottom: 1px solid #0054a6;
background: transparent url("Images/ServiceMenuBG.png");
background-repeat: repeat-x;
}
.MainMenu ul {
padding: 0;
margin:0;
list-style: none;
}
.MainMenu li {
float: left;
position: relative;
height: 31px;
width: 150px;
padding: 11px 0 0 0;
text-align: center;
border-right: 1px solid #0054a6;
}
.MainMenuItem#First { border-left: 1px solid #0054a6; }
.MainMenuItem a {
color: #ffffff;
display: block;
height: 31px;
width: 150px;
font-weight: bold;
text-decoration: none;
}
.MainMenuItem:hover { background: transparent url("Images/ServiceMenuBG.png") repeat-x 0 -42px; }
.SubMenu {
z-index: 500;
display: none;
width: 150px !important;
position: absolute;
top: 10px;
left: 0;
background-color: rgb(51,118,184);
}
.SubMenu li { padding: 0 0 2px 5px; height: 20px !important; width: 143px; }
.SubMenu li a {
height: 20px !important;
font-weight: normal;
color: #ffffff;
text-align: left;
text-decoration: none;
}
.SubMenu li a:hover { text-decoration: underline; }
.MainMenu li.MainMenuItem>ul { top: auto; left: auto; }
.MainMenu li.MainMenuItem:hover ul { display: block; }'
Here's the HTML:
<div class="MainMenu">
<ul>
<li class="MainMenuItem" id="First">Home</li>
<li class="MainMenuItem">Philosophies</li>
<li class="MainMenuItem">Services
<ul class="SubMenu">
<li id="TopItem">Shop Repair</li>
<li>Donations</li>
<li>Consulting</li>
<li id="BottomItem">On-site Service</li>
</ul>
</li>
<li class="MainMenuItem">Contracts</li>
<li class="MainMenuItem">About Us</li>
<li class="MainMenuItem">Contact Us</li>
</ul>
</div>
The SubMenu doesn't display either on mouseover or if I set it's initial display property to block. It's as if it doesn't exist on the page at all.
Thanks in advance for any help.
.MainMenu { overflow: hidden; }
is hiding the sub menus, so remove that line. Line 6 in your CSS.
As Sotiris mentioned
.MainMenuItem a { color: #ffffff; }
hides the top menu items (maybe not on your version because I see you have a background image)