Css自定义列表样式，没有对齐的垂直位置和列表样式类型的弯曲箭头

Question

我有这样的html结构：

<div class="details">
 <p class="title">Title</p>
  <ul>
   <li> Test 1 </li>
   <li> Test 2 </li>
   <li> Test 3 </li>
   <li> Test 4 </li>
   <li> Test 5 </li>
   <li> Test 6 </li>
  </ul>
</div>

我想让列表样式不是垂直对齐的，标题将在中间指向每个列表大致如下：

无论如何都要像上面的图像那样设计风格并保持响应？

Answer 1

有许多方法可以实现这一点，包括图像，背景图像，SVG图形等。这是一个简单的，尽管是CSS重的例子。

＆＃13;

＆＃13;

.details {
  position: relative;
}

.details p {
  display: inline-block;
  left: 0;
  margin: -.5em 0 0 0;
  position: absolute;
  top: 50%;
}

.details li {
  list-style-type: none;
  position: relative;
}

.details li::after {
  content: "▶";
  font-size: 11px;
  left: -8px;
  line-height: 100%;
  position: absolute;
  top: 5px;
}

.details li::before {
  border: 0 solid transparent;
  content: "";
  height: 12px;
  left: -25px;
  position: absolute;
  width: 22px;
}

.details li:nth-child(1)::before,
.details li:nth-child(2)::before,
.details li:nth-child(3)::before {
  border-radius: 30px 0 0 0;
  border-top: 3px solid #000;
  top: 8px;
}

.details li:nth-child(4)::before,
.details li:nth-child(5)::before,
.details li:nth-child(6)::before {
  border-bottom: 3px solid #000;
  border-radius: 0 0 0 30px;
  bottom: 7px;
}

.details li:nth-child(1) {
  left: 10px;
}
.details li:nth-child(2) {
  left: 25px;
}
.details li:nth-child(2)::before {
  height: 10px;
}
.details li:nth-child(3) {
  left: 30px;
}
.details li:nth-child(3)::before {
  height: 7px;
}
.details li:nth-child(4) {
  left: 25px;
}
.details li:nth-child(4)::before {
  height: 7px;
}
.details li:nth-child(5) {
  left: 15px;
}
.details li:nth-child(5)::before {
  height: 10px;
}
.details li:nth-child(6) {
  left: 0;
}

＆＃13;

<div class="details">
  <p class="title">Title</p>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

<p>垂直居中，但箭头形状不会因元素数量而改变。这仍然可以通过自定义类或某些选择器魔法来实现。

修改：要横向居中.details块，text-align无法正常工作。以下是如何做到这一点：

＆＃13;

＆＃13;

.details {
  position: relative;
}

.details p {
  display: inline-block;
  left: 0;
  margin: -.5em 0 0 0;
  position: absolute;
  text-align: right; /**/
  top: 50%;
  width: 50%; /**/
}

.details ul {
  padding-left: 50%; /**/
}

.details li {
  list-style-type: none;
  position: relative;
}

.details li::after {
  content: "▶";
  font-size: 11px;
  left: -8px;
  line-height: 100%;
  position: absolute;
  top: 5px;
}

.details li::before {
  border: 0 solid transparent;
  content: "";
  height: 12px;
  left: -25px;
  position: absolute;
  width: 22px;
}

.details li:nth-child(1)::before,
.details li:nth-child(2)::before,
.details li:nth-child(3)::before {
  border-radius: 30px 0 0 0;
  border-top: 3px solid #000;
  top: 8px;
}

.details li:nth-child(4)::before,
.details li:nth-child(5)::before,
.details li:nth-child(6)::before {
  border-bottom: 3px solid #000;
  border-radius: 0 0 0 30px;
  bottom: 7px;
}

.details li:nth-child(1) {
  left: 10px;
}
.details li:nth-child(2) {
  left: 25px;
}
.details li:nth-child(2)::before {
  height: 10px;
}
.details li:nth-child(3) {
  left: 30px;
}
.details li:nth-child(3)::before {
  height: 7px;
}
.details li:nth-child(4) {
  left: 25px;
}
.details li:nth-child(4)::before {
  height: 7px;
}
.details li:nth-child(5) {
  left: 15px;
}
.details li:nth-child(5)::before {
  height: 10px;
}
.details li:nth-child(6) {
  left: 0;
}

＆＃13;

<div class="details">
  <p class="title">Title</p>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

大多数CSS都是一样的，我只添加了三行，标有/**/。希望这会有所帮助。