html - Create a border on a triangle -
i apply border on arrow (not div) after each list element. white , not visible in fiddle.
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 , (max-width: 767px) { .step-number-first { margin-left: 8px; } } @media screen , (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; } } i don't want go down route of rotating 45 degrees.
drop-shadow technique
the typical method of creating triangles in css (and same method you're using) use border trick. using technique, there several approaches can pretty close want. approach consider simplest.
filter: drop-shadow(5px 0 0 #000); by applying un-blurred drop shadow bit of offset, can create border on right edge. note technique uses drop-shadow filter rather box-shadow (because box-shadow wouldn't wrap triangle), , therefore vendor prefixing required acceptable browser support.
demo
here's runnable demo including vendor prefixes , proper cropping. if doesn't right, let me know , i'll fix it.
this done without wrapper element (just remove wrapper div , margins on child element), have small gap near top , bottom corners of triangle.
.triangle_wrapper { /* crop out edges remove undesired gap */ height: 40px; overflow: hidden; } .triangle-right { /* give little offset, wrapper can crop */ margin-top: -5px; margin-left: -5px; /* border-hack triangles need no width or height */ width: 0; height: 0; /* makes triangle */ border-left: 25px solid #ff0000; border-top: 25px solid transparent; border-bottom: 25px solid transparent; /* adds 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>
Comments
Post a Comment