How to make this box to a triangle in css [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
please check out this code pen link
want to make the square beside home to triangle upside down. when i hover - its working correctly
https://codepen.io/shaswat/pen/gXLBwo
please help me to make that square to triangle .creating a navigation bar
after I hover its working correctly by transforming to upside
/* Menu CSS */#cssmenu,
#cssmenu > ul {
background: black;
padding-bottom: 3px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > a {
padding: 15px 25px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu > ul > li:hover > a {
background: red;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a.active {
background: grey;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 50px;
left: 0;
}
#cssmenu > ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 18px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
#cssmenu > ul ul li a:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu > ul ul li a:active {
background: green;
}
#cssmenu li a:first-child:nth-last-child(2):before {
content:"";
position: absolute;
height: 0;
width: 0;
border: 8px solid orange;
top: 40%;
right: 5px;
}
#cssmenu li:hover > a:first-child:nth-last-child(2):before {
border: 8px solid transparent;
border-bottom-color: orange;
margin-top: -5px;
}
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li><a href='#'>Product 3</a></li>
</ul>
</li>
<li><a class='active' href='#'>Products</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

Answer 1

On the line 119 replace orange with transparent. And add border-top-color: orange;. If you make border-bottom-color instead of border-top-color arrow will be reversed.
border: 8px solid transparent;
border-top-color: orange;

Answer 2

Change the code of #cssmenu li a:first-child:nth-last-child(2):before like this :
#cssmenu li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 8px solid transparent;
border-top-color: orange;
top: 40%;
right: 5px;
}
the full code :
/* Menu CSS */
#cssmenu,
#cssmenu>ul {
background: black;
padding-bottom: 3px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu>ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu>ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu>ul>li {
float: left;
position: relative;
}
#cssmenu>ul>li>a {
padding: 15px 25px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu>ul>li:hover>a {
background: red;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu>ul>li.active>a,
#cssmenu>ul>li>a.active {
background: grey;
}
/* Childs */
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu>ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 50px;
left: 0;
}
#cssmenu>ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 18px;
background: transparent;
}
#cssmenu>ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu>ul ul li a {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
#cssmenu>ul ul li a:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu>ul ul li a:active {
background: green;
}
#cssmenu li a:first-child:nth-last-child(2):before {
content: "";
position: absolute;
height: 0;
width: 0;
border: 8px solid transparent;
border-top-color: orange;
top: 40%;
right: 5px;
}
#cssmenu li:hover>a:first-child:nth-last-child(2):before {
border: 8px solid transparent;
border-bottom-color: orange;
margin-top: -5px;
}
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li><a href='#'>Product 3</a></li>
</ul>
</li>
<li><a class='active' href='#'>Products</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

Answer 3

Instead of having #cssmenu li a:first-child:nth-last-child(2):before have border: 8px solid orange; replace it with border: 8px solid transparent; and border-top-color: orange;. This will give you a down arrow and when you hover it will turn into an up arrow.

Answer 4

As an alternative, you could use a font. Replace the last two rules with this:
#cssmenu>ul>li>a::after {
content: "⏷";
position: absolute;
line-height: .5;
font-size: 24px;
transform: rotate(0deg) translateY(0);
margin-left: 5px;
color:orange;
transition:.5s ease;
}
#cssmenu>ul>li:hover>a::after {
transform:rotate(180deg) translate(5px,-5px);
transform-origin:center;
transition:.5s ease;
}
Demo
/* Menu CSS */
#cssmenu,
#cssmenu>ul {
background: black;
padding-bottom: 3px;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu>ul:before,
#cssmenu>ul:after {
content: "";
display: table;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu>ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu>ul {
background: blue;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu>ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu>ul>li {
float: left;
position: relative;
}
#cssmenu>ul>li>a {
padding: 15px 25px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #0d0d0d;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
}
#cssmenu>ul>li:hover>a {
background: red;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu>ul>li.active>a,
#cssmenu>ul>li>a.active {
background: grey;
}
/* Childs */
#cssmenu>ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 50px;
background: green;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu>ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 50px;
left: 0;
}
#cssmenu>ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 18px;
background: transparent;
}
#cssmenu>ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu>ul ul li a {
padding: 15px 26px;
display: block;
color: white;
font-size: 14px;
text-decoration: none;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.50s ease-in-out;
-moz-transition: all 0.50s ease-in-out;
-ms-transition: all 0.50s ease-in-out;
transition: all 0.50s ease-in-out;
}
#cssmenu>ul ul li a:hover {
border-left: 10px solid #d64e34;
background: grey;
}
#cssmenu>ul ul li a:active {
background: green;
}
#cssmenu>ul>li:first-of-type>a::after {
content: "⏷";
position: absolute;
line-height: .5;
font-size: 24px;
transform: rotate(0deg) translate(-5px,0);
margin-left: 5px;
color:orange;
transition:.5s ease;
}
#cssmenu>ul>li:first-of-type:hover>a::after {
transform:rotate(180deg) translate(5px,-5px);
transform-origin:center;
transition:.5s ease;
}
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a>
<ul>
<li><a href='#'>Product 1</a></li>
<li><a href='#'>Product 2</a></li>
<li><a href='#'>Product 3</a></li>
</ul>
</li>
<li><a class='active' href='#'>Products</a>
</li>
<li><a href='#'>About</a>
</li>
<li><a href='#'>Contact</a></li>
</ul>
</div>

Answer 5

just change this styles
#cssmenu li a:first-child:nth-last-child(2):before {
content:"";
position: absolute;
height:0;
width: 0;
border-top: 8px solid orange;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
top: 40% ;
right:5px;
}