css三角不一样大

CSS中的三角形是很常见的设计元素，可以用于制作菜单箭头、指示标志、下拉菜单等等。在CSS中，我们可以使用伪元素:before和:after来制作三角形。三角形的大小可以通过设置border的宽度和高度来实现。下面是一些制作三角形时可能用到的常见CSS属性：

/* 去除默认样式 */
* {
  margin: 0;
  padding: 0;
}

/* 容器设置 */
.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* 三角形样式 */
.arrow {
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}

/* 不同大小的三角形 */
.small {
  border-bottom-width: 5px;
}

.medium {
  border-bottom-width: 10px;
}

.large {
  border-bottom-width: 20px;
}

通过上面的代码，我们可以实现一个三角形容器和三个不同大小的三角形。当我们设置border-bottom-width的不同值时，就可以得到三角形大小不同的效果。