CSS

1. div 정중앙 콘텐츠 위치시키기

div box의 좌우+상하 center로 위치시킨다.

div span{
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  text-align: center;
}

2. clip을 활용한 breadcrumb

위와 같은 모양의 네비게이터는 clip-path를 활용하여 만들 수 있다. 직접 설정하기는 복잡한 편이니 여기에서 Generate 하여 사용하는게 좋다.

<div class="breadcrumb">
    <span>메인</span>
    <span>서브</span>
    <span>서서브</span>
</div>

.breadcrumb {
    display: inline-block;
}


.breadcrumb span {
    border-radius: 0 6px 6px 0;
    -webkit-clip-path: polygon(calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%, 8px 50%, 0% 0%);
    clip-path: polygon(calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%, 8px 50%, 0% 0%);
    color: #343741;
    background-color: rgba(0, 119, 204, .2);
    line-height: 16px;
    font-weight: 500;
    padding: 0.2rem 0.9rem 0.2rem 1.0rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    cursor: pointer;
}

.breadcrumb span:nth-of-type(1) {
    border-radius: 6px 0 0 6px;
    -webkit-clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
    color: #0c2b41;
    background-color: rgba(0, 119, 204, .3);
    padding: 0.2rem 1.2rem 0.2rem 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
}

.breadcrumb span:last-of-type {
    background-color: rgba(0, 119, 204, .1);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%);
    color: #0071c2;
}

3. 심플한 탭 만들기

라이브러리를 사용하지 않은 순수 탭 css/html

<div class="tabs">
    <button type="button" class="tab selected"><span>Tab</span></button>
    <button type="button" class="tab"><span>Tab</span></button>
    <button type="button" class="tab"><span>Tab</span></button>
    <button type="button" class="tab"><span>Tab</span></button>
</div>

.tabs {
  scrollbar-width: thin;
  display: -webkit-flex;
  display: flex;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}

.tabs:before {
  background-color: #d3dae6;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
}

.tabs .tab {

  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: inherit;
  color: inherit;
  border-radius: 0;
  height: 48px;
  font-size: 14px;
  font-size: 1rem;
  color: #343741;
  background-color: transparent;
  cursor: pointer;
  line-height: 1.5;
  padding: 12px 16px;
  position: relative;
  transition: color .25s cubic-bezier(.694, .0482, .335, 1), background-color .25s cubic-bezier(.694, .0482, .335, 1);
}

.tabs .tab.selected {
  color: #07c;
  cursor: default;
}

.tabs .tab.selected:after {
  -webkit-animation: euiTab .15s cubic-bezier(.694, .0482, .335, 1);
  animation: euiTab .15s cubic-bezier(.694, .0482, .335, 1);
  background-color: #07c;
  bottom: 0;
  content: " ";
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
}

.tabs .tab span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 2px;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: -webkit-transform .15s cubic-bezier(.34, 1.61, .7, 1);
  transition: transform .15s cubic-bezier(.34, 1.61, .7, 1);
  transition: transform .15s cubic-bezier(.34, 1.61, .7, 1), -webkit-transform .15s cubic-bezier(.34, 1.61, .7, 1);
  white-space: nowrap;
}

4. 두 포인트 사이에 선 그리기

function drawGraphLine(x1, y1, x2, y2, color) {

    var dist = Math.ceil(Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)));
    var angle = Math.atan2(y2-y1, x2-x1)*180/Math.PI;
    var xshift = dist - Math.abs(x2-x1);
    var yshift = Math.abs(y1-y2)/2;

    var div = document.createElement('div');
    div.style.backgroundColor = color;
    div.style.position = 'absolute';
    div.style.left = (x1 - xshift/2) + 'px';
    div.style.top = (Math.min(y1,y2) + yshift) + 'px';
    div.style.width = dist+'px';
    div.style.height = '3px';
    div.style.WebkitTransform = 'rotate('+angle+'deg)';
    div.style.MozTransform = 'rotate('+angle+'deg)';

    document.body.appendChild(div);
}