Как показать стрелку в конце выбранного бокового элемента навигации с помощью css и flexbox?

Question

Я создаю компонент боковой навигации, и одно из требований - показать белую стрелку в конце выбранного элемента. Я не совсем уверен, как этого добиться. Вот ожидаемое поведение, если вы заметили, что пункт меню «Сопоставления» имеет белую стрелку в конце.

Вот фрагмент кода с битами html и css, который у меня есть. Я провел некоторое исследование, и похоже, что это может быть достигнуто с помощью манипуляции css-границей дополнительного элемента, сидящего рядом с тегом привязки, но я не мог до конца разобраться.

.person-container {
  display: flex;
}

.main-section {
  margin: 0px;
  padding: 10px;
  flex-grow: 2;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 16px 16px;
  text-decoration: none;
  border: 0.2px solid #004563;
  border-bottom: 0px;
}

li:last-child {
  border-bottom: 0.2px solid #004563;
}

li a.is-active {
  background-color: #004563;
  color: white;
}

li a:hover:not(.is-active) {
  background-color: #70c2e5;
  color: white;
}

<div class="person-container">
  <nav class="side-nav">
    <ul>
      <li><a href="#home">Details</a></li>
      <li><a href="#news">Addresses</a></li>
      <li><a href="#contact">Hobies</a></li>
      <li><a href="#about">Affiliates</a></li>
      <li><a class="is-active" href="#about">Mappings</a></li>
      <li><a href="#about">Notes</a></li>
    </ul>
  </nav>
  <div class="main-section">
    <h3>User Profile</h3>
    <hr />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Answer 1

Вы можете сделать проще с простым фоном:

.person-container {
  display: flex;
}

.main-section {
  margin: 0px;
  padding: 10px;
  flex-grow: 2;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 16px 16px;
  text-decoration: none;
  border: 0.2px solid #004563;
  border-bottom: 0px;
}

li:last-child {
  border-bottom: 0.2px solid #004563;
}

li a.is-active {
  /*arrow*/
  background: 
    linear-gradient(to bottom left,#f1f1f1 49.8%,transparent 50%) 100% calc(50% + 5px),
    linear-gradient(to top    left,#f1f1f1 49.8%,transparent 50%) 100% calc(50% - 5px),
    #004563;
  background-size:10px 10px;
  background-repeat:no-repeat;
  /**/
  color: white;
  border-right:none;
}

li a:hover:not(.is-active) {
  background-color: #70c2e5;
  color: white;
}

<div class="person-container">
  <nav class="side-nav">
    <ul>
      <li><a href="#home">Details</a></li>
      <li><a href="#news">Addresses</a></li>
      <li><a href="#contact">Hobies</a></li>
      <li><a href="#about">Affiliates</a></li>
      <li><a class="is-active" href="#about">Mappings</a></li>
      <li><a href="#about">Notes</a></li>
    </ul>
  </nav>
  <div class="main-section">
    <h3>User Profile</h3>
    <hr />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

Answer 2

Добавить CSS с: после

li a.is-active {
  background-color: #004563;
  color: white;
  position:relative;
}
li a.is-active::after {
    right: 0%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
    border-right-color: #fff;
    border-width: 10px;
    margin-top: -10px;

}

.person-container {
  display: flex;
}

.main-section {
  margin: 0px;
  padding: 10px;
  flex-grow: 2;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
}

li a {
  display: block;
  color: #000;
  padding: 16px 16px;
  text-decoration: none;
  border: 0.2px solid #004563;
  border-bottom: 0px;
}

li:last-child {
  border-bottom: 0.2px solid #004563;
}

li a.is-active {
  background-color: #004563;
  color: white;
  position:relative;
}

li a:hover:not(.is-active) {
  background-color: #70c2e5;
  color: white;
}

li a.is-active::after {
    right: 0%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
	border-right-color: #fff;
	border-width: 10px;
	margin-top: -10px;
	
}

<div class="person-container">
  <nav class="side-nav">
    <ul>
      <li><a href="#home">Details</a></li>
      <li><a href="#news">Addresses</a></li>
      <li><a href="#contact">Hobies</a></li>
      <li><a href="#about">Affiliates</a></li>
      <li><a class="is-active" href="#about">Mappings</a></li>
      <li><a href="#about">Notes</a></li>
    </ul>
  </nav>
  <div class="main-section">
    <h3>User Profile</h3>
    <hr />
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>