Question

我正在尝试创建一个菜单，该菜单将显示一个伪多边形以显示所选菜单项的箭头，我面临两个挑战

首先，每当菜单/链接项的字体大小或高度发生变化时，如何调整::after伪形状的动态高度
第二个-如何仅显示活动菜单或单击菜单中的箭头/ ::after pseudo arrow

body {
  font-family: helvetica, arial, san-sarif;
  color: blue;
  margin: auto;
  padding: auto;
}

:root {
  --myMenuColor: silver;
}

.base-container {
  display: flex;
}

.main-content {
  flex: 4;
}

.menu-container {
  display: flex;
  flex-direction: column;
}

.arrow_box {
  position: relative;
  background: var(--myMenuColor);
  border: 1px solid var(--myMenuColor);
  border-bottom: none;
  margin: 5px 5px;
}

.arrow_box::after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box::after {
  -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  border-width: 19px;
  margin-top: -20px;
  background: var(--myMenuColor);
}

<html>

<head>
  <title>Testing Flex box</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="base-container">

    <div class="menu-container">
      <div class="arrow_box">
        <h1 class="logo">First Menu</h1>
      </div>
      <div class="arrow_box">
        <h1 class="logo">Second Menu</h1>
      </div>
      <div class="arrow_box">
        <h1 class="logo">Third Menu</h1>
      </div>
    </div>
    <div class="main-content">

    </div>
  </div>
</body>

</html>

Answer 1

要获得响应性的“箭头”高度/宽度，可以从border-width更改为padding。因为您需要使用percentages来设置相对于父级的尺寸，并且border-width不支持percentages，但padding却支持。

因此，例如padding:10%表示高度和宽度为20%的{{1}}。

要仅在arrow_box和/或active元素上进行设置，您需要使用clicked来切换类，但是由于您没有标记javaScript/jQuery在您的问题中，我用javaScript作了示例。

.arrow_box：hover：after { / *在此处添加样式* / }

当您拥有:hover类时，可以使用.active

见下文

.arrow-box.active:after {}

:root{
--myMenuColor: silver;
}

.base-container
{
    display: flex;

}

.main-content{
    flex:4;
}

.menu-container
{
    display: flex;
    flex-direction:column;
}
.arrow_box {
    position: relative;
    background: var(--myMenuColor);
    border: 1px solid var(--myMenuColor);
    border-bottom: none;
    margin: 5px 5px;
    z-index:2;

}
.arrow_box::after{
    left: 100%;
    top: 50%;
    transform:translate(-100%,-50%);
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
      -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    padding:10%;
    background: var(--myMenuColor);
    transition:0.3s ease-out;
    opacity:0;
    z-index:-1;
}
.arrow_box:hover:after { /* arrow_box.active:after */
  opacity:1;
  transform:translate(0,-50%)
}

列表项CSS伪形状动态高度以及菜单高度

1 个答案: