Trying to implement a hexagon ul list using css and having issues with the hover state. Currently when hovered only the border left and right change color, I need all sides. I think the issue lies somewhere in the li hover before class but trying this doesn't work. Thanks.
ul.pagination li {
display: inline-block;
position: relative;
width: 30px;
height: 17.32px;
margin: 12px 8px;
border-left: solid 2px #d7d7d7;
border-right: solid 2px #d7d7d7;
cursor: pointer;
}
ul.pagination li:before {
top: -10.61px;
border-top: solid 2.83px #d7d7d7;
border-right: solid 2.83px #d7d7d7;
}
ul.pagination li:after, ul.pagination li:before {
content: "";
position: absolute;
width: 21.21px;
height: 21.21px;
-webkit-transform: scaleY(.5774) rotate(-45deg);
transform: scaleY(.5774) rotate(-45deg);
background-color: inherit;
left: 2.39px;
}
Fiddle is: https://jsfiddle.net/91jeee5m/
You've got the right way to do, just do the same with :before and :after state like this :
ul.pagination li:hover:after {
border-left: solid 2px #00A2C6;
border-bottom: solid 2px #00A2C6;
}
ul.pagination li:hover:before {
border-top: solid 2px #00A2C6;
border-right: solid 2px #00A2C6;
}
See it here
You need to set the border color on your :before and :after pseudo-elements as well:
ul.pagination li:hover,
ul.pagination li:hover:before,
ul.pagination li:hover:after {
border-color: #00A2C6;
}
Here is simple hexagon pagination
* {
box-sizing: border-box
}
body {
text-align: center
}
#hexagon,
#hexagon li {
position: relative
}
#hexagon{
margin-top: 40px ;
}
#hexagon li {
position: relative;
display: block;
width: 54px;
height: 30px;
float: left;
margin-right: 30px;
list-style-type:none;
}
#hexagon li,
#hexagon li:before,
#hexagon li:after{
border-left: 4px solid red;
border-right: 4px solid red;
transition: all .6s;
backface-visibility:hidden;
}
#hexagon li:before,
#hexagon li:after {
content: "";
position: absolute;
width: 46px;
height: 30px;
transform-origin: center center 0px;
}
#hexagon li:before {
transform: rotate(-60deg);
left: -4px;
bottom: 0px;
}
#hexagon li:after {
transform: rotate(60deg);
left: -4px;
bottom: 0px;
}
#hexagon li:hover,#hexagon li:hover:before,#hexagon li:hover:after {
border-left: 4px solid green;
border-right: 4px solid green;
cursor:pointer
}
<ul id=hexagon class=pagination>
<li>1
</li>
<li>2
</li>
<li>3
</li>
<li>...
</li>
</ul>
Related
Fiddle here
I'm trying to set the border color of some irregular shapes (arrowish) I did. The problem is that to achieve those shapes I had to manipulate the borders already so I can't just do border-color: red;
I want to set the color of the borders of each shape 2px
HTML:
<div class="menuTop">
<ul>
<li><div>HOME</div></li>
<li><div>Location</div></li>
<li><div><span>Sub-Location<span></div></li>
</ul>
</div>
CSS:
.menuTop {
background-color: lightgreen;
height: 80px;
margin: auto;
position: absolute;
top: 0;
width: 100%
}
.menuTop ul {
list-style-type: none;
}
.menuTop li {
font-size: 0;
display: inline-block;
}
.menuTop li:before,
.menuTop li:after {
content:'';
display: inline-block;
width:0;
height:0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
vertical-align: middle;
}
.menuTop li:before {
border-top-color: #fff;
border-bottom-color: #fff;
border-right-color: #fff;
}
.menuTop li:first-of-type:before {
border:0;
}
.menuTop li:first-of-type {
border-left: 2px solid #dfdfdf;
}
.menuTop li:after {
border-left-color: #fff;
}
.menuTop li:last-of-type:after {
border:0;
}
.menuTop li:last-of-type {
border-right: 2px solid #F37C31;
border-bottom: 2px solid #F37C31;
border-top: 2px solid #F37C31;
}
.menuTop li div {
width: 185px;
height:40px;
display: inline-block;
background: #fff;
text-align:center;
position: relative;
line-height:40px;
vertical-align: middle;
}
.menuTop li div a, span {
text-decoration: none;
color: #bbb;
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size: 13px;
}
.menuTop li div a:hover {
text-decoration: underline;
color: #000;
}
.menuTop li div span {
color: #000;
font-weight: bold;
}
CSS solution with rectangles
Here is an example that does not use triangles, but instead uses rotated rectangle.
Explanation:
First the before and after create a rotated rectangle.
Give the before rectangle the same color as the background.
After element gets the same color as the arrow.
Then we can apply borders to rectangles to give the perfect illusion of the elements having the border.
body {
background-color: #555;
}
.menu {
display: inline-block;
margin: 0;
padding: 0;
}
.menu .arrow {
position: relative;
display: inline-block;
list-style: none;
font-size: 2em;
width: 150px;
height: 70px;
background-color: white;
margin-right: 90px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.arrow:first-of-type {
border-left: 2px solid red;
}
.arrow::after {
position: absolute;
top: 9px;
right: -25px;
content: "";
height: 50px;
width: 50px;
background-color: white;
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow::before {
content: "";
position: absolute;
top: 9px;
left: -25px;
height: 50px;
width: 50px;
background-color: #555; /*Needs to match body backgrond-color*/
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow:first-of-type::before {
content: none;
}
.arrow span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="menu">
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
</ul>
This question already has answers here:
How to make this arrow in CSS only?
(5 answers)
Closed 6 years ago.
How can i achieve the effect in the below image using css
parent div with divs with triangle egde like in the picture below. if i can achieve this with JS am also open to any good idea
* {
margin: 0;
}
a {
color: #333;
text-decoration: none;
}
nav {
background: #eee;
overflow: hidden;
}
nav li {
display: inline-block;
vertical-align: top;
position: relative;
}
nav li:after {
content: " ";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40px;
transform: rotate(45deg);
background: #999;
}
nav a {
display: block;
padding: 14px 20px;
position: relative;
z-index: 1;
}
nav li a:before {
content: " ";
position: absolute;
right: 3px;
top: 0;
bottom: 0;
width: 40px;
transform: rotate(45deg);
background: #eee;
z-index: -1;
}
<nav>
<ul>
<li>Jewelry and watches
</li>
<li>watches
</li>
<li>Jewelry
</li>
<li>Wrist watches
</li>
</ul>
</nav>
Or you can even simplify it by using one psudo element and using the border property
* {
margin: 0;
}
a {
color: #333;
text-decoration: none;
}
nav {
background: #eee;
overflow: hidden;
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.25);
margin: 15px;
}
nav li {
display: inline-block;
vertical-align: top;
position: relative;
}
nav li:after {
content: " ";
position: absolute;
right: 0px;
top: -1px;
bottom: 0;
width: 30px;
transform: rotate(45deg);
background: transparent;
height: 30px;
border-right: 1px solid #999;
border-top: 1px solid #999;
}
nav a {
display: block;
padding: 5px 20px;
position: relative;
z-index: 1;
}
<nav>
<ul>
<li>Jewelry and watches
</li>
<li>watches
</li>
<li>Jewelry
</li>
<li>Wrist watches
</li>
</ul>
</nav>
Try this one
HTML
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
<li>Vans</li>
<li>Camper Vans</li>
<li>1989 VW Westfalia Vanagon</li>
</ul>
CSS
.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: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
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;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
background: transparent !important;
color: black;
pointer-events: none;
cursor: default;
}
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }
Fiddle here
I'm trying to set the border color of some irregular shapes (arrowish) I did. The problem is that to achieve those shapes I had to manipulate the borders already so I can't just do border-color: red;
I want to set the color of the borders of each shape 2px
HTML:
<div class="menuTop">
<ul>
<li><div>HOME</div></li>
<li><div>Location</div></li>
<li><div><span>Sub-Location<span></div></li>
</ul>
</div>
CSS:
.menuTop {
background-color: lightgreen;
height: 80px;
margin: auto;
position: absolute;
top: 0;
width: 100%
}
.menuTop ul {
list-style-type: none;
}
.menuTop li {
font-size: 0;
display: inline-block;
}
.menuTop li:before,
.menuTop li:after {
content:'';
display: inline-block;
width:0;
height:0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
vertical-align: middle;
}
.menuTop li:before {
border-top-color: #fff;
border-bottom-color: #fff;
border-right-color: #fff;
}
.menuTop li:first-of-type:before {
border:0;
}
.menuTop li:first-of-type {
border-left: 2px solid #dfdfdf;
}
.menuTop li:after {
border-left-color: #fff;
}
.menuTop li:last-of-type:after {
border:0;
}
.menuTop li:last-of-type {
border-right: 2px solid #F37C31;
border-bottom: 2px solid #F37C31;
border-top: 2px solid #F37C31;
}
.menuTop li div {
width: 185px;
height:40px;
display: inline-block;
background: #fff;
text-align:center;
position: relative;
line-height:40px;
vertical-align: middle;
}
.menuTop li div a, span {
text-decoration: none;
color: #bbb;
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size: 13px;
}
.menuTop li div a:hover {
text-decoration: underline;
color: #000;
}
.menuTop li div span {
color: #000;
font-weight: bold;
}
CSS solution with rectangles
Here is an example that does not use triangles, but instead uses rotated rectangle.
Explanation:
First the before and after create a rotated rectangle.
Give the before rectangle the same color as the background.
After element gets the same color as the arrow.
Then we can apply borders to rectangles to give the perfect illusion of the elements having the border.
body {
background-color: #555;
}
.menu {
display: inline-block;
margin: 0;
padding: 0;
}
.menu .arrow {
position: relative;
display: inline-block;
list-style: none;
font-size: 2em;
width: 150px;
height: 70px;
background-color: white;
margin-right: 90px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.arrow:first-of-type {
border-left: 2px solid red;
}
.arrow::after {
position: absolute;
top: 9px;
right: -25px;
content: "";
height: 50px;
width: 50px;
background-color: white;
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow::before {
content: "";
position: absolute;
top: 9px;
left: -25px;
height: 50px;
width: 50px;
background-color: #555; /*Needs to match body backgrond-color*/
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow:first-of-type::before {
content: none;
}
.arrow span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="menu">
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
</ul>
I modified the code Breadcrumbs arrow for working in right to left direction but text not working fine this code in jsfiddle look how text show : jsfiddle.net/tr7th3d2
<style>
.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 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
right: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-right: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-right: 1px;
right: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-right: 10px;
}
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-right-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-right-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-right-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-right-color: hsla(34,85%,75%,1); }
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-right-color: hsla(34,85%,25%,1) !important; }
</style>
<div id="page-wrap">
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
<li>Vans</li>
<li>Camper Vans</li>
<li>1989 VW Westfalia Vanagon</li>
</ul>
</div>
and this original code :
https://css-tricks.com/triangle-breadcrumbs/
you must change a tag padding
.breadcrumb li a {
padding: 10px 55px 10px 0px;
}
I am trying to make the ul above the rest of the content and the z index is not working.
I added the position property as needed to set z index but still does not work, what i am doing wrong?
How i can fix this?
ul {
list-style: none;
}
.nb-drop-down {
width: 400px;
position: relative;
}
.nb-drop-down ul {
width: 100%;
border: 1px solid #eee;
position: absolute;
z-index: 100;
}
.nb-drop-down button, .nb-drop-down li {
text-align: left;
line-height: 50px;
padding-left: 10px;
cursor: pointer;
}
.nb-drop-down button {
width: 100%;
background: transparent;
border: 1px solid #eee;
position: relative;
}
.nb-drop-down button::after {
content: '';
position: absolute;
border-style: solid;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
border-width: 10px 6.5px 0 6.5px;
border-color: #e3e3e3 transparent transparent transparent;
}
.nb-drop-down button:focus {
outline: none;
}
.nb-drop-down li:not(:last-child) {
border-bottom: 1px solid #eee;
}
<div class="nb-drop-down">
<button class="nb-main-item">Main Item</button>
<ul class="nb-list">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ul>
</div>
<h1>hello</h1>
UL is above H1 (or everything else in general), but has transparent background. Set background, eg:
.nb-drop-down ul {background: white;}
http://jsfiddle.net/5ojk1ojq/