三角形边框怎么在html打,在三角形上，创建边框_html_开发99编程知识库

我希望在每個列表元素之後的箭頭( 不是 div ) 上應用一個邊框。 目前它們是白色的，在這fiddle中不可見。

html :

1. 1

   Step 1

2. 2

   Step 2

3. 3

   Step 3

4. 4

   Step 4

css:.steps-container {

background-color: #ffffff;

border-radius: 4px;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

-ms-border-radius: 4px;

background-clip: padding-box;

float: left;

height: 52px;

margin: 0;

width: 100%;

}

.steps-container ol.steps {

border-radius: 4px;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

-ms-border-radius: 4px;

background-clip: padding-box;

counter-reset: li;

font-size: 9px;

font-size: 0.9rem;

line-height: 10px;

list-style: none;

margin: 0;

overflow: hidden;

padding: 0;

}

.steps-container ol.steps. step {

box-sizing: border-box;

height: 52px;

width: 25%;

}

.steps-container ol.steps li {

list-style-image: none;

list-style-type: none;

margin-left: 0;

text-align: center;

color: #c7c7c7;

padding-top: 4px;

background-color: #ffffff;

position: relative;

}

.steps-container ol.steps li:after {

position: absolute;

top: -16px;

left: 100%;

content:"";

height: 0;

width: 0;

pointer-events: none;

border: solid transparent;

border-left-color: #ffffff;

border-width: 26px 10px;

margin-top: 16px;

-webkit-filter: drop-shadow(5px 0 2px #f2f2f2);

-moz-filter: drop-shadow 5px 0 2px #f2f2f2;

-ms-filter: drop-shadow 5px 0 2px #f2f2f2;

-o-filter: drop-shadow 5px 0 2px #f2f2f2;

filter: drop-shadow 5px 0 2px #f2f2f2;

}

.steps-container ol.steps li:first-child {

margin-left: 0;

}

.steps-container ol.steps li:first-child. step-details:after {

border: none;

}

.steps-container ol.steps li:last-child:after {

border-width: 0;

}

.steps-container ol.steps li. step-content {

display: block;

padding: 2px;

margin-top: 10px;

}

.steps-container ol.steps li. step-content:before {

counter-increment: li;

}

.steps-container ol.steps> li {

float: left;

}

.steps-container ol.steps. step-number {

border-radius: 50%;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

-ms-border-radius: 50%;

background-clip: padding-box;

background-color: grey;

color: #ffffff;

height: 16px;

width: 16px;

text-align: center;

margin: 0 auto;

float: left;

line-height: 15px;

margin-left: 15px;

}

.steps-container ol.steps li.current {

color: #ffffff;

background-color: grey;

}

.steps-container ol.steps li.current. step-number {

background-color: #ffffff;

color: #565656;

}

.steps-container ol.steps li.current:after {

border-left-color: grey;

}

.steps-container ol.steps li.current:before {

-webkit-filter: drop-shadow(0 0 0 transparent);

-moz-filter: drop-shadow 0 0 0 transparent;

-ms-filter: drop-shadow 0 0 0 transparent;

-o-filter: drop-shadow 0 0 0 transparent;

filter: drop-shadow 0 0 0 transparent;

}

.steps-container li.step1 {

z-index: 3;

}

.steps-container li.step2 {

z-index: 2;

}

.steps-container li.step3 {

z-index: 1;

}

.steps-container li.step4 {

z-index: 0;

}

@media screen and (max-width: 767px) {

. step-number-first {

margin-left: 8px;

}

}

@media screen and (min-width: 768px) {

. steps-container {

height: 64px;

}

. steps-container ol.steps {

font-size: 20px;

font-size: 2rem;

}

. steps-container ol.steps. step {

height: 64px;

}

. steps-container ol.steps. step-number {

font-size: 22px;

font-size: 2.2rem;

font-size: 22px;

left: 10px;

height: 36px;

line-height: 36px;

position: absolute;

top: 15px;

width: 36px;

}

. steps-container ol.steps li {

text-align: left;

}

. steps-container ol.steps li. step-content {

margin-top: 20px;

}

. steps-container ol.steps li. step-details {

margin-left: 65px;

}

. steps-container ol.steps li:after {

border-width: 32px 15px;

}

}

我不想沿著旋轉 45度的路線走下去。