CSS组件之图形（figure）

.container {
   
  width: 150px !important;
  border: 1px solid;
  display: inline-block;
  /* font-size:16px; */
}
.figure {
   
  display: inline-block;
  background-color: black;
}

三角形（triangle）

上三角（triangle-up）

/* clip-path */
.figure.figure-triangle-up {
   
  width: 100%;
  padding-bottom: 100%;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

下三角（triangle-down）

/* clip-path */
.figure.figure-triangle-down {
   
  width: 100%;
  padding-bottom: 100%;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

左三角（triangle-left）

/* clip-path */
.figure.figure-triangle-left {
   
  width: 100%;
  padding-bottom: 100%;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

右三角（triangle-right）

/* clip-path */
.figure.figure-triangle-right {
   
  width: 100%;
  padding-bottom: 100%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

左上角（triangle-topleft）

/* clip-path */
.figure.figure-triangle-topleft {
   
  width: 100%;
  padding-bottom: 100%;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}