html - 我正在尝试在具有尖头的 html 中设置客户列表框的样式（如思考框）

Question

为了实现这一点，我尝试使用 div 列表来操作 div，但我无法理解如何在 + 按钮下方获取指向箭头。可以单独使用 CSS 完成，还是有现成的 vuejs 组件可用？

任何帮助或线索表示赞赏

标签： htmlcssvuejs2

Answer 1

您可以使用 psuedo 类:after，或者:before问题是当您需要添加阴影时。我已经模拟了一个非常快速和简单的示例来说明如何实现它。

document
  .querySelector(".c-filter__toggle")
  .addEventListener("click", function () {
    document.querySelector(".c-filter__ul").classList.toggle(
      "c-filter__ul--active");
  });

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,500&display=swap");
body {
  font-family: "Roboto";
  padding: 50px;
}

.c-filter {
  position: relative;
}
.c-filter__toggle {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  font-size: 22px;
  color: white;
  background-color: rebeccapurple;
  border-radius: 100rem;
  width: 40px;
  height: 40px;
}
.c-filter__toggle--active:after {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.c-filter__ul {
  padding: 0;
  border-radius: 4px;
  display: inline-block;
  box-shadow: 0 0 4px 3px rgba(0, 0, 0, 0.05);
  position: absolute;
  display: none;
  margin: 0;
  -webkit-transform: translate(-30px, 20px);
          transform: translate(-30px, 20px);
  background: white;
}
.c-filter__ul--active {
  display: block;
}
.c-filter__ul:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  top: 5px;
  left: 50%;
  border: 7px solid black;
  border-color: transparent transparent white white;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: rotate(135deg) translateX(-50%);
          transform: rotate(135deg) translateX(-50%);
  box-shadow: -4px 3px 4px 0px rgba(0, 0, 0, 0.05);
  z-index: -1;
}
.c-filter__item {
  list-style: none;
  display: block;
}
.c-filter__item input {
  display: none;
}
.c-filter__item input:checked ~ label:before {
  background-color: green;
  border-color: #00b300;
  background-image: url("data:image/svg+xml,%3Csvg fill='rgb(255,255,255)' aria-hidden='true' data-prefix='fas' data-icon='check' class='svg-inline--fa fa-check fa-w-16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
  background-size: 65%;
  background-position: center center;
  background-repeat: no-repeat;
}
.c-filter__item label {
  display: block;
  padding: 5px;
  cursor: pointer;
  padding: 8px 8px 8px 35px;
  position: relative;
}
.c-filter__item label:before {
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 10px;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
}
.c-filter__item label:hover {
  background-color: #f4f5f7;
}
.c-filter__item label:hover:before {
  border: 1px solid #c8c8c8;
}

<div class='c-filter'>
  <button class='c-filter__toggle'>+</button>
  <ul class='c-filter__ul'>
    <li class='c-filter__item'><input type='checkbox' id='1'><label tabindex='-1' for='1'>Option 1</label></li>
    <li class='c-filter__item'><input type='checkbox' id='2'><label tabindex='-1' for='2'>Option 2</label></li>
    <li class='c-filter__item'><input type='checkbox' id='3'><label tabindex='-1' for='3'>Option 3</label></li>
    <li class='c-filter__item'><input type='checkbox' id='4'><label tabindex='-1' for='4'>Option 4</label></li>
    <li class='c-filter__item'><input type='checkbox' id='5'><label tabindex='-1' for='5'>Option 5</label></li>
    <li class='c-filter__item'><input type='checkbox' id='6'><label tabindex='-1' for='6'>Option 6</label></li>
    <li class='c-filter__item' ><input type='checkbox' id='7'><label tabindex='-1' for='7'>Option 7</label></li>
    <li class='c-filter__item'><input type='checkbox' id='8'><label tabindex='-1' for='8'>Option 8</label></li>
    <li class='c-filter__item'><input type='checkbox' id='9'><label tabindex='-1' for='9'>Option 9</label></li>
    <li class='c-filter__item'><input type='checkbox' id='10'><label tabindex='-1'                for='10'>Option 10</label></li>
  </ul>
  
</div>