如何在没有步进器步数的情况下保持角度：HTML，CSS

Question

我使用以下代码创建了步进器。

但是好像更复杂一些。所以我想创建比我的代码更简单的代码。例如，不要使用

::before

伪选择器，而只使用一个轮廓元素。

一定要保持角度，与步数无关，最重要的是圆角。

如果您有任何解决方案，请分享您的想法。

谢谢你。

.stepper1 {
    --stepper1-height:75px;
    --stepper1-strok: 1px;
    --stepper1-deapth: 1.5rem;
    /* outer-outline depth */
    --stepper1-gap: 0.3rem;
    /* outer-outline thickness, gap */
    width: 100%;
    height: var(--stepper1-height);
    display: flex;
    margin-right: var(--stepper1-deapth);
}

.stepper1-step {
    /* margin-right: calc(var(--stepper1-deapth) * -1 + var(--stepper1-gap)); */
    position: relative;
    flex: 1 1 0%;
    clip-path: polygon(0% 0%,
            calc(100% - var(--stepper1-deapth)) 0%,
            100% 50%,
            calc(100% - var(--stepper1-deapth)) 100%,
            0% 100%,
            var(--stepper1-deapth) 50%);

}

.outer-outline {
    position: relative;
    width: 100%;
    height: 100%;
    filter: url(#round);
    color: gray;
}

.outer-outline::before {
    content: "";
    display: block;
    padding-top: var(--stepper1-height);
    background: currentColor;
    clip-path: polygon(0% 0%,
            calc(100% - var(--stepper1-deapth)) 0%,
            100% 50%,
            calc(100% - var(--stepper1-deapth)) 100%,
            0% 100%,
            var(--stepper1-deapth) 50%);
}

.inner-outline {
    position: absolute;
    top: var(--stepper1-strok);
    left: calc(var(--stepper1-strok) * 2);
    width: calc(100% - var(--stepper1-strok) * 3.5);
    height: calc(100% - var(--stepper1-strok) * 2);
    filter: url(#round);
    color: white;
}

.inner-outline::before  {
    content: "";
    display: block;
    padding-top: calc(var(--stepper1-height) - var(--stepper1-strok) * 2);
    background: currentColor;
    clip-path: polygon(0% 0%,
            calc(100% - var(--stepper1-deapth)) 0%,
            100% 50%,
            calc(100% - var(--stepper1-deapth)) 100%,
            0% 100%,
            var(--stepper1-deapth) 50%);
}
.stepper1-step .content {
    position: absolute;
    top: 0;
    justify-content: flex-start;
    align-content: center;
    left: var(--stepper1-deapth);
    width: calc(100% - var(--stepper1-deapth) * 2);
    height: var(--stepper1-height);
    display: grid;
    padding-left: 1rem;
}
.title, .description { 
    margin: 0;
 }

<div class="stepper1 mt-12 px-10">
    <div class="stepper1-step">
        <div class="outer-outline"></div>
        <div class="inner-outline text-white"></div>
        <div class="content">
            <p class="title">Step 1</p>
            <p class="description">description....</p>
        </div>
    </div>
    <div class="stepper1-step">
        <div class="outer-outline text-blue-400"></div>
        <div class="inner-outline text-blue-50"></div>
        <div class="content">
            <p class="title">Step 2</p>
            <p class="description">description....</p>
        </div>
    </div>
    <div class="stepper1-step">
        <div class="outer-outline text-gray-500"></div>
        <div class="inner-outline text-white"></div>
        <div class="content">
            <p class="title">Step 3</p>
            <p class="description">description....</p>
        </div>
    </div>
</div>
<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg"
    version="1.1">
    <defs>
        <filter id="round">
            <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur" />
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
                result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop" />
        </filter>
    </defs>
</svg>

Answer 1

如果您想使用 SVG，可以选择使用路径。在示例中，我首先有 SVG，然后对于“步进器”，相同的 SVG 用作列表项的背景。

我使用属性

vector-effect="non-scaling-stroke"

来在列表项的内容更改时保持边框的宽度。这不是一个完美的解决方案，因为当缩放很多时，由于边界没有变宽，形状周围将会有一个“空白空间”。但如果你不是每一篇都写一篇文章，我想也没关系。

我使用 SvgPathEditor 创建路径。

ul.stepper {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: .2em;
}

ul.stepper li {
  min-height: 6em;
  min-width: 5em;
  padding: 0 2em;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104" width="100" preserveAspectRatio="none"><path transform="translate(2 2)" d="M8 0Q-2 0 1 10L13 45Q15 50 13 55L1 90Q-2 100 8 100H73Q78 100 83 90L98 55Q100 50 98 45L83 10Q79 0 73 0Z" fill="orange" stroke="black" stroke-width="4" vector-effect="non-scaling-stroke" /></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul.stepper li p {
  margin: 0;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 104"
  width="100" preserveAspectRatio="none">
  <path transform="translate(2 2)"
    d="M8 0Q-2 0 1 10L13 45Q15 50 13 55L1 90Q-2 100 8 100
    H73Q78 100 83 90L98 55Q100 50 98 45L83 10Q79 0 73 0Z"
    fill="orange" stroke="black" stroke-width="4"
    vector-effect="non-scaling-stroke" />
</svg>

<ul class="stepper">
  <li>
    <p class="title">Step 1</p>
    <p class="description">description....</p>
  </li>
  <li>
    <p class="title">Step 2</p>
    <p class="description">description....</p>
  </li>
</ul>