CSS Battle 19 chevron

<div class="first tri"></div>
<div class="second tri"></div>
<div class="third tri"></div>
<style>
  body{
    background:#6592CF;
  }
  .tri{
    position:fixed;
    background:#293D7E;
    width:250px;
    height:100px;
    clip-path:polygon(0 0, 15.5% 0, 50% 69.5%, 84.5% 0, 100% 0, 50% 100%);
  }
  .first{
    left:75px;
    top: 50px;
  }
  .second{
    left:75px;
    top:100px;
  }
  .third{
    left:75px;
    top:150px;
  }
</style>

clip-path

• clip-path CSS 속성은 요소의 클리핑 범위를 지정합니다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨집니다.

/* 키워드 값 */
clip-path: none;

/* <clip-source> 값 */
clip-path: url(resources.svg#c1);

/* <geometry-box> 값 */
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/* <basic-shape> 값 */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

/* 박스와 도형 값 조합 */
clip-path: padding-box circle(50px at 0 100px);

/* 전역 값 */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

polygon()

• basic-shape 데이터 중 하나이다.
• 3개 이상의 인자를 전달하여 도형을 만든다.