List Item CSS 伪形状动态高度与菜单高度

Question

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

首先如何使::after伪图形的动态高度，每当menu/link项目字体大小或高度发生变化时需要调整
第二 - 如何仅针对活动或单击的菜单显示 arrow/the ::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

要获得响应式 'arrow' height/width，您可以将 border-width 更改为 padding。因为您需要使用 percentages 来设置相对于父项的大小，并且 border-width 不支持 percentages 但 padding 支持。

因此，例如 padding:10% 表示它将是 20% 的 arrow_box 高度和宽度。

要仅在 active and/or clicked 元素上设置它，您需要使用 javaScript/jQuery 来切换 classes 但是因为你没有在你的问题中标记 javaScript，我让你和例子 :hover.

.arrow_box:hover:after { /* 在这里添加样式 */ }

当你有一个.activeclass时，你可以使用.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%)
}

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

List Item CSS 伪形状动态高度与菜单高度

List Item CSS pseudo shape dynamic height with menu height

html

css

less