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

Question

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

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

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

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

Answer 1

我认为最干净的方法是将 V 字形包裹在一个包含 div 的容器中，并相对于每一行绝对定位。

所以每一行需要：

display: flex;
position: relative;

然后您可以定位包含 div 的位置并使用以下命令轻松居中人字形：

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

这是一支可以帮助您入门的笔：https://codepen.io/anon/pen/qmmPGy

Answer 2

基于您当前的代码库，您可以将 position: relative 应用到 <li> 并将 position: absolute 应用到 <label> 来实现这一点。此外，您需要使用 right: 2.5% 来定位 <label> 进行水平定位，使用 top: 50%; 和 transform: translateY (-125%); 进行垂直居中。

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

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

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

Navbar: Position and background color of the triangles (CSS)

html

css

navigation

navbar

responsive