Создать границу на треугольнике

Question

Я хотел бы применить только границу по стрелке (а не к div), которая находится после каждого элемента списка. В настоящее время они белые и не видны в этой скрипке.

https://jsfiddle.net/smks/faadd5r5/

HTML:

<div class="content"> 
<div class="steps-container"> 
    <ol class="steps"> 
     <li class="step step1 current"> 
      <div class="step-content"> 
       <div class="step-number step-number-first">1</div> 
       <span class="step-details">Step 1</span> 
      </div> 
     </li> 
     <li class="step step2 "> 
      <div class="step-content"> 
       <div class="step-number">2</div> 
       <span class="step-details">Step 2</span> 
      </div> 
     </li> 
     <li class="step step3 "> 
      <div class="step-content"> 
       <div class="step-number">3</div> 
       <span class="step-details">Step 3</span> 
      </div> 
     </li> 
     <li class="step step4 "> 
      <div class="step-content"> 
       <div class="step-number">4</div> 
       <span class="step-details">Step 4</span> 
      </div> 
     </li> 
    </ol> 
</div> 
</div> 

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 градусов.

Answer 1

DROP-ТЕНЬ ТЕХНИКА

Типичный метод создания треугольников в CSS (и тот же метод, который вы используете) заключается в использовании пограничного трюка. Используя эту технику, есть несколько подходов, которые могут приблизиться к тому, что вы хотите. Это подход, который я считаю самым простым.

filter: drop-shadow(5px 0 0 #000); 

Применяя неровную тень с небольшим смещением, мы можем создать границу на правом краю. Обратите внимание, что этот метод использует фильтр тени, а не тень окна (потому что тень коробок не будет должным образом обертываться треугольником), и поэтому для приемлемой поддержки браузера требуется префикс поставщика.

---

DEMO

Вот работоспособной демо, включая префиксы и правильного кадрирования. Если что-то не выглядит правильным, сообщите мне, и я исправлю это.

Это можно сделать без элемента обертки (просто удалите обертку div и поля на дочернем элементе), но у нее будет небольшой зазор около верхнего и нижнего углов треугольника.

.triangle_wrapper { 
 
    
 
    /* crop out the edges to remove the undesired gap */ 
 
    height: 40px; 
 
    overflow: hidden; 
 
    
 
} 
 
.triangle-right { 
 
    
 
    /* give a little offset, so the wrapper can crop it properly */ 
 
    margin-top: -5px; 
 
    margin-left: -5px; 
 
    
 
    /* border-hack triangles need no width or height */ 
 
    width: 0; 
 
    height: 0; 
 
    
 
    /* this makes the triangle */ 
 
    border-left: 25px solid #ff0000; 
 
    border-top: 25px solid transparent; 
 
    border-bottom: 25px solid transparent; 
 
    
 
    /* this adds the border */ 
 
    filter: drop-shadow(5px 0 0 #000); 
 
    -webkit-filter: drop-shadow(5px 0 0 #000); 
 
    filter: progid: DXImageTransform.Microsoft.Shadow(Strength=0, offX=5px, offY=0px, Color='#000000'); 
 
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, offX=5px, offY=0px, Color='#000000')"; 
 
    
 
}

<div class="triangle_wrapper"> 
 
    <div class="triangle-right"></div> 
 
</div>

Answer 2

Попробуйте это:

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; 
    padding-left: 16px; 
} 
.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; 
    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:before { 
    position: absolute; 
    top: -16px; 
    left: 100%; 
    content: " "; 
    height: 0; 
    width: 0; 
    pointer-events: none; 
    border: solid transparent; 
    border-left-color: #808080; 
    border-width: 28px; 
    margin-top: 22px; 
    margin-top: 14px; 
} 

.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; 
    } 
} 

DEMO HERE