Navbar:三角形的位置和背景颜色(CSS)

Question

Navbar:三角形的位置和背景颜色(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

在当前代码库的基础上，可以将position: relative应用于<li>，将position: absolute应用于<label>以实现这一点。此外，您需要定位您的<label>使用right: 2.5%水平定位和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>

​

Answer 2

我认为最干净的方法是把你的雪佛龙包在一个包含的div和位置，绝对相对于每一行。

所以每一行都需要：

display: flex;
position: relative;

然后，您可以轻松地定位您的包含的div和中心的雪佛龙：

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

这是一支笔让你开始：https://codepen.io/anon/pen/qmmPGy