html - Navbar:三 Angular 形的位置和背景颜色(CSS)

Question

导航栏:三 Angular 形的位置和背景颜色(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>