如何在CSS中将此框设置为三角形

Question

请查看此代码笔链接

想把三角形的家里的广场倒置。当我悬停 - 它正常工作

https://codepen.io/shaswat/pen/gXLBwo

请帮我把那个正方形变成三角形。创建一个导航栏

在我将其正常工作转换为向上

之后

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在线119上用透明替换橙色。并添加border-top-color：orange;。如果你使用border-bottom-color而不是border-top-color箭头将会反转。

border: 8px solid transparent;
border-top-color: orange;

Answer 2

像这样更改#cssmenu li a:first-child:nth-last-child(2):before的代码：

#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;
}

完整代码：

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

而不是让#cssmenu li a:first-child:nth-last-child(2):before border: 8px solid orange;替换为border: 8px solid transparent;和border-top-color: orange;。这会给你一个向下箭头，当你悬停它时会变成向上箭头。

Answer 4

作为替代方案，您可以使用字体。用这个替换最后两个规则：

SET "FILELIST=vollstaendigkeit.txt"

7z a gruwo_pictures.zip -i @"%FILELIST%"

FOR /F "usebackq tokens=*" %%f IN (`TYPE "%FILELIST%"`) DO (
    IF NOT EXIST "%%~f" (
        ECHO "%%~f" doesn't exist >> C:\Users\Rebecca\Desktop\test\missingfiles.txt
    )
)

演示

＆＃13;

＆＃13;

#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;
}

＆＃13;

/* 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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 5

只需更改此样式

#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;
 }