Question

我尝试使用以下按钮创建多步骤表单：

但我不知道如何开始这个。有人可以帮助我吗？也许是一个好资源？我也在我的应用程序中使用bootstrap。

现在我有：

我的HTML看起来像这样：

    <ol class="multi-step">
    <li class="active">
        <a href="http://mydomain/nl/data-analysis/templates">
            <span class="number-circle">1</span>
            Maak een sjabloon        </a>
    </li>
    <li class="">
        <a href="http://mydomain/nl/data-analysis/scheduler">
            <span class="number-circle">2</span>
            Plan je sjabloon        </a>
    </li>
    <li class="">
        <a href="http://mydomain/nl/data-analysis/reports">
            <span class="number-circle">3</span>
            Bekijk de resultaten        </a>
    </li>
</ol>

Answer 1

试试这个利用伪元素

CSS

.multi-step{
  list-style-type:none;
  padding:0;
}
.multi-step > li{
  display:inline-block;
  margin: auto 20px;
}
.multi-step > li > a{
  display:block;
  padding:10px 5px;
  background-color: blue;
  color:#fff;
  position: relative;
}
.multi-step > li > a::after,
.multi-step > li > a::before{
  content:"";
  position: absolute;
  height:0;
  top:0;
  bottom: 0;
  width:0;
  border:19px solid red;
}
.multi-step > li > a::before{
  left:-35px;
  border-left-color:transparent;
}
.multi-step > li > a::after{
  right:-38px;
  border-color:transparent;
  border-left-color:red;
}

相应的风格

reference link

希望这会有所帮助..

Answer 2

因此，在HTML中，在页面上呈现的所有内容都只是一个不同大小的矩形。它可能看起来不那样，但是所有东西都有一个边界框，它决定了它在页面上的存在。

有多种方法可以创建形状（例如给出50％border-radius只需将其变成圆形），但它们就是这样，它们并不是真正理想的。

你有什么构成形状的东西是SVG，你可以在你自己的规格页面上画一个矢量。

然而，我怀疑你所展示的内容是否构成了“设计”，或者只是恰好以某种方式呈现的元素。

我能提出的最佳解决方案：

插入两个元素并使用CSS transform属性以skew一个方向，另一个方式：

<div id="bar">
  <div class="arrow">
    <a>asdf</a>
  </div>
  <div class="arrow">
    <a>hjkl</a>
  </div>
  <div class="arrow">
    <a>qwer</a>
  </div>
</div>

#bar {
  display: flex;
  padding: 10px;
}

.arrow a {
  position: absolute;
  line-height: 100px;
  margin-top: -50px;
  width: 200px;
  margin-left: 25px;
  text-align: center;
  z-index: 1;
}

.arrow::before {
  content: '';
  background: blue;
  height: 50px;
  width: 200px;
  margin-left: 25px;
  display: block;
  transform: skew(45deg);
}

.arrow::after {
  content: '';
  background: blue;
  height: 50px;
  width: 200px;
  margin-left: 25px;
  display: block;
  transform: skew(-45deg);
}

https://jsfiddle.net/7nku4474/1

使用SVG绘制形状：

<div id="bar">
  <a href="asdf">
    <svg fill="blue">
      <path d="M 0,0 L 200,0, L 250,50 L 200,100 L 0,100 L 50,50 Z">
      </path>
      <text x="125" y="50" font-size="12" fill="#fff" text-anchor="middle" alignment-baseline="central">
        asdf
      </text>
    </svg>
  </a>

  <a href="asdf">
    <svg fill="blue">
      <path d="M 0,0 L 200,0, L 250,50 L 200,100 L 0,100 L 50,50 Z">
      </path>
      <text x="125" y="50" font-size="12" fill="#fff" text-anchor="middle" alignment-baseline="central">
        hjkl
      </text>
    </svg>
  </a>

  <a href="asdf">
    <svg fill="blue">
      <path d="M 0,0 L 200,0, L 250,50 L 200,100 L 0,100 L 50,50 Z">
      </path>
      <text x="125" y="50" font-size="12" fill="#fff" text-anchor="middle" alignment-baseline="central">
        qwer
      </text>
    </svg>
  </a>
</div>

#bar {
  display: flex;
}

#bar svg {
  height: 100px;
  width: 250px;
  margin: 10px;
}

#bar a:not(:first-of-type) {
  margin-left: -50px;
}

https://jsfiddle.net/1smpuL1r/

创建多步骤按钮

2 个答案: