Question

我正在尝试制作包含页码和说明的多级表单标题。

我想要做的是用箭头标记来划分每个步骤

1 step > 2tep > 3 step> 4 step

这主要是一个css问题我只需要知道如何将这些boder变成箭头符号

Fiddle

解释

正如您在小提琴中看到的那样，当您滑动到下一步时，我会将图标更改为复选标记。因此，我尝试使用>箭头分隔这些图标，然后添加一些css background颜色以分隔active，previous，next步骤

Answer 1

你正在搜索这样的fiddle（我用文字做了一个简单的箭头）吗？

.generatecssdotcom_arrowpoint {position:absolute;top:0;right:0;font-size:8px;color:#cccccc;}
.generatecssdotcom_arrowpoint a {color:#cccccc;text-decoration:none;font-weight:normal;}
.generatecssdotcom_arrowpoint a:hover {color:#cccccc;text-decoration:none;font-weight:normal;}
.generatecssdotcom_arrow {text-align:left;font-size:24px;font-family:Georgia;color:#000000;width:250px;height:30px;position:relative;background:#E46B00;border:7px solid #FFCC00;margin:7px 41px 7px 7px;padding:10px;}
.generatecssdotcom_arrow:after, .generatecssdotcom_arrow:before {left:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;}
.generatecssdotcom_arrow:after {border-left-color:#E46B00;border-width:34px;margin-top:-34px;}
.generatecssdotcom_arrow:before {border-left-color:#FFCC00;border-width:44px;margin-top:-44px;}

请参阅此site以生成

对于单个箭头，请参阅此demo

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid green;
}



 <div class="arrow-right"></div>

Answer 2

看着你的小提琴，这会做你想要的吗？

.divider:before { content: ">"; }

如何制作多步标题

2 个答案: