smartart/dist/chevron.min.css

A lightweight, responsive CSS library for creating beautiful chevron-style progress indicators and flowcharts

:root{--chevron-width: 200px;--chevron-height: 60px;--chevron-tip-width: 30px;--chevron-gap: 20px;--chevron-overlap: -10px;--chevron-bg-color: #e0e0e0;--chevron-content-bg-color: #f5f5f5;--chevron-text-color: #000;--chevron-bullet-color: #666;--chevron-font-family: Arial, sans-serif;--chevron-font-size: 18px;--chevron-font-weight: bold;--chevron-content-padding: 15px;--chevron-padding-top-bottom: 0;--chevron-padding-right: 20px;--chevron-padding-left: 30px;--chevron-padding-left-first: 10px;--chevron-list-item-spacing: 8px;--chevron-bullet-indent: 15px}.chevron-list{list-style:none;display:flex;align-items:stretch;max-width:1000px;margin:0 auto;>li{display:flex;flex-direction:column;position:relative;flex:0 0 auto;>div{width:var(--chevron-width);height:var(--chevron-height);background-color:var(--chevron-bg-color);font-size:var(--chevron-font-size);font-weight:var(--chevron-font-weight);color:var(--chevron-text-color);font-family:var(--chevron-font-family);display:flex;align-items:center;justify-content:center;position:relative;z-index:2;padding:var(--chevron-padding-top-bottom) var(--chevron-padding-right) var(--chevron-padding-top-bottom) var(--chevron-padding-left);margin-right:var(--chevron-overlap);clip-path:polygon(0 0,calc(100% - var(--chevron-tip-width)) 0,100% 50%,calc(100% - var(--chevron-tip-width)) 100%,0 100%,var(--chevron-tip-width) 50%)}>ul{list-style:none;background-color:var(--chevron-content-bg-color);color:var(--chevron-text-color);font-family:var(--chevron-font-family);padding:var(--chevron-content-padding);flex:1;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;width:calc(var(--chevron-width) - var(--chevron-tip-width));margin-right:var(--chevron-overlap);margin-left:0;margin-top:-2px;>li{margin-bottom:var(--chevron-list-item-spacing);position:relative;padding-left:var(--chevron-bullet-indent);&:last-child{margin-bottom:0}&:before{content:"\25cf";position:absolute;left:0;color:var(--chevron-bullet-color)}}}&:last-child{>div{clip-path:polygon(0 0,calc(100% - var(--chevron-tip-width)) 0,100% 50%,calc(100% - var(--chevron-tip-width)) 100%,0 100%,var(--chevron-tip-width) 50%);margin-right:0}>ul{margin-right:0;width:calc(var(--chevron-width) - var(--chevron-tip-width))}}&:first-child{>div{clip-path:polygon(0 0,calc(100% - var(--chevron-tip-width)) 0,100% 50%,calc(100% - var(--chevron-tip-width)) 100%,0 100%);padding-left:var(--chevron-padding-left-first)}>ul{margin-left:0;width:calc(var(--chevron-width) - var(--chevron-tip-width))}}}}