导航栏：三角形的位置和背景颜色（CSS）

Question

Navbar：三角形的位置和背景颜色（CSS）

好的，我正在尝试创建导航，如页面底部的图像所示。我怎样才能达到这个结果？非常感谢提前。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

nav {
  height: 100%;
  width: 100%;
  background-color: yellow;
}

li {
  display: block;
  border-bottom: 1px solid grey;
  line-height: 50px;
}

a {
  text-decoration: none;
}

.dropdown {
  display: none;
}

.label {
  border: solid blue;
  border-width: 0 3px 3px 0;
  padding: 3px;
  transform: rotate(45deg);
  position: relative;
  display: inline-block;
  float: right;
  margin: 1px;
}

@media all and (min-width: 800px) {
  li {
    display: inline-block;
    border-bottom: none;
  }
}

＆＃13;

<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a>
      <input type="checkbox" id="dd-1" class="dropdown" />
      <label for="dd-1" class="label"></label>
    </li>
    <li><a href="#">Page 3</a>
      <input type="checkbox" id="dd-2" class="dropdown" />
      <label for="dd-2" class="label"></label>
    </li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#">Page 5</a>
      <input type="checkbox" id="dd-3" class="dropdown" />
      <label for="dd-3" class="label"></label>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

根据您当前的代码库，您可以将position: relative应用于<li>，将position: absolute应用于<label>以实现此目的。另外，您需要使用<label>定位right: 2.5%进行水平定位，将top: 50%;定位transform: translateY (-125%);进行垂直定心。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
}

nav {
  height: 100%;
  width: 100%;
  background-color: yellow;
}

li {
  display: block;
  border-bottom: 1px solid grey;
  line-height: 50px;
  position: relative;
  padding-left: 1%;
  padding-right: 1%;
}

a {
  text-decoration: none;
}

.dropdown {
  display: none;
}

.label {
  border: solid blue;
  border-width: 0 3px 3px 0;
  padding: 3px;
  transform: rotate(45deg) translateY(-125%);
  position: absolute;
  display: inline-block;
  top: 50%;
  right: 2.5%;
  margin: 1px;
}

@media all and (min-width: 800px) {
  li {
    display: inline-block;
    border-bottom: none;
  }
}

＆＃13;

<nav>
  <ul>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a>
      <input type="checkbox" id="dd-1" class="dropdown" />
      <label for="dd-1" class="label"></label>
    </li>
    <li><a href="#">Page 3</a>
      <input type="checkbox" id="dd-2" class="dropdown" />
      <label for="dd-2" class="label"></label>
    </li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#">Page 5</a>
      <input type="checkbox" id="dd-3" class="dropdown" />
      <label for="dd-3" class="label"></label>
    </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为最干净的方法是将你的雪佛龙包裹在一个包含的div中，并且绝对相对于每一行。

所以每一行都需要：

display: flex;
position: relative;

然后，您可以轻松定位包含的div并使V形图中心：

align-items: center;
display: flex;
justify-content: center;
position: absolute;
right: 0;

以下是帮助您入门的笔：https://codepen.io/anon/pen/qmmPGy