Question

所以#LI_3的最后三个CSS行都有边框属性来制作一个三角形。但我不能为我的生活弄清楚如何定位该三角形，使其位于导航栏底部下方并指向超链接。任何帮助将非常感谢！对格式怪异的CSS表示歉意，由于我的网站结构方式，它是自动提取而不是手动复制粘贴。

＆＃13;

#NAV_1 {
  box-sizing: border-box;
  height: 62px;
  width: 1362px;
  perspective-origin: 681px 31px;
  transform-origin: 681px 31px;
  background: rgb(238, 60, 36) none repeat scroll 0% 0% / auto padding-box border-box;
  font: normal normal normal normal 16px / 22px'Open Sans', sans-serif;
  margin: 0px 0px -80px;
}
/*#NAV_1*/

#UL_2 {
  box-sizing: border-box;
  height: 62px;
  max-width: 1200px;
  width: 1200px;
  perspective-origin: 600px 31px;
  transform-origin: 600px 31px;
  font: normal normal normal normal 16px / 22px'Open Sans', sans-serif;
  list-style: none outside none;
  margin: 0px 81px 40px;
  padding: 20px 15px;
}
/*#UL_2*/

#LI_3 {
  box-sizing: border-box;
  display: inline-block;
  height: 22px;
  width: 75.6875px;
  perspective-origin: 37.8438px 11px;
  transform-origin: 37.8438px 11px;
  font: normal normal normal normal 16px / 22px'Open Sans', sans-serif;
  list-style: none outside none;
  border-style: solid;
  border-width: 0 40px 20px 40px;
  border-color: transparent transparent #ffffff transparent;
}
/*#LI_3*/

#A_4,
#A_6,
#A_8 {
  box-sizing: border-box;
  color: rgb(255, 255, 255);
  text-align: left;
  text-decoration: none;
  border: 0px none rgb(255, 255, 255);
  font: normal normal bold normal 16px / 22px'Open Sans', sans-serif;
  list-style: none outside none;
  outline: rgb(255, 255, 255) none 0px;
  transition: all 0.2s ease 0s;
}
/*#A_4, #A_6, #A_8*/

#LI_5 {
  box-sizing: border-box;
  display: inline-block;
  height: 22px;
  width: 124.203px;
  perspective-origin: 62.0938px 11px;
  transform-origin: 62.0938px 11px;
  font: normal normal normal normal 16px / 22px'Open Sans', sans-serif;
  list-style: none outside none;
  margin: 0px 0px 0px 46px;
}
/*#LI_5*/

#LI_7 {
  box-sizing: border-box;
  display: inline-block;
  height: 22px;
  width: 114.25px;
  perspective-origin: 57.125px 11px;
  transform-origin: 57.125px 11px;
  font: normal normal normal normal 16px / 22px'Open Sans', sans-serif;
  list-style: none outside none;
  margin: 0px 0px 0px 46px;
}
/*#LI_7*/

＆＃13;

<nav id="NAV_1">
  <ul id="UL_2">
    <li id="LI_3">
      <a href="http://website.com/solutions/product/#overview" id="A_4">Overview</a>
    </li>
    <li id="LI_5">
      <a href="http://website.com/solutions/product/technology/#technology" id="A_6">The Technology</a>
    </li>
    <li id="LI_7">
      <a href="http://website.com/solutions/product/right-fit/#isitright" id="A_8">Right For You?</a>
    </li>
  </ul>
</nav>

＆＃13;

Answer 1

你的css中有很多奇怪的东西（包括UPPERCASE类名），这是不需要的？

我建议使用伪元素:before＆amp; :after这种行为。

我已更新您的代码，并在导航项的悬停时添加了三角形。

* {
  display: border-box;
}
ul {
  list-style: none;
}
#NAV_1 {
  background: red;
}
#UL_2 {
  display: flex;
  align-items: flex-start;
}
#UL_2 a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding: 1em 2em;
  position: relative;
}
/*
If you want to display this just over the #LI_3 as a permanent triangle then replace the "#UL_2 a:hover:after" with "#LI_3 a:after"
*/
#UL_2 a:hover:after {
  content: "";
  border-style: solid;
  border-width: 12px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

<nav id="NAV_1">
  <ul id="UL_2">
    <li id="LI_3">
      <a href="http://website.com/solutions/product/#overview" id="A_4">Overview</a>
    </li>
    <li id="LI_5">
      <a href="http://website.com/solutions/product/technology/#technology" id="A_6">The Technology</a>
    </li>
    <li id="LI_7">
      <a href="http://website.com/solutions/product/right-fit/#isitright" id="A_8">Right For You?</a>
    </li>
  </ul>
</nav>

将CSS三角形定位为边框

1 个答案: