创建多匹配按钮-英雄云拓展知识分享

匿名投稿 252 2024-01-22

我正在尝试使用以下按钮创建多步式：

但是我不知道如何开始。有人可以帮我吗？或许是一个好的资源？我还在利用程序中使用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>

看答案

尝试使用伪元素

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:⑶5px;
border-left-color:transparent;
}
.multi-step > li > a::after{
right:⑶8px;
border-color:transparent;
border-left-color:red;
}

相应的样式

参考链接

希望这可以帮助..

🚀🌟 点击注册免费试用超级应用平台-英雄云企业级hpa Paas 🌟🚀 😃👉🌐

免责声明：

本网址（www.yingxiongyun.com）发布的材料主要源于独立创作和网友匿名投稿。此处提供的所有信息仅供参考之用。我们致力于提供准确且可信的信息，但不对材料的完整性或真实性作出任何保证。用户应自行验证相关信息的正确性，并对其决策承担全部责任。对于由于信息的错误、不准确或遗漏所造成的任何损失，本网址不承担任何法律责任。本网站所展示的所有内容，如文字、图像、标志、音频、视频、软件和程序等的版权均属于原创作者。如果任何组织或个人认为网站内容可能侵犯其知识产权，或包含不准确之处，请即刻联系我们进行相应处理。