搞定前端实习题——CSS绘制三角形和圆形！！！

CSS绘制三角形

主要是设置上下左右边框的宽度来实现不同颜色，不同形状的三角形或者是梯形。

div{
	width:0;
	height:0;
	border:10px solid red;
	
	border-top-color:transparent;
	border-left-color:transparent;
	border-right-color:transparent;
}
<div></div>

在CSS中，border-top-color 属性用于设置元素顶部边框的颜色。当设置为 transparent 时，它表示边框的顶部颜色是完全透明的。这意味着，如果边框的宽度不为零，它仍然会占用空间，但不会显示任何颜色。

绘制圆形

使用 border-radius 属性

您可以使用 border-radius 属性将一个正方形或矩形元素变成圆形。如果 border-radius 的值设置为元素尺寸的50%，它就会变成一个完美的圆形。

.circle {
  width: 100px;
  height: 100px;
  background-color: blue; /* 圆形的填充颜色 */
  border-radius: 50%; /* 将元素变成圆形 */
}

border-radius 是CSS中的一个属性，用于设置元素边框的圆角。它可以给元素的四个角设置圆弧形状，使得元素看起来更加柔和，而不是尖锐的直角。border-radius 属性可以有多种不同的值，下面是一些常见的用法：

单个值：应用于所有四个角。

.element {
  border-radius: 10px; /* 所有角的圆角半径为10px */
}

百分比值：百分比基于元素的尺寸，100% 将创建一个完美的圆形。

.element {
  border-radius: 100%; /* 创建圆形 */
}

椭圆：使用斜杠 / 分隔，第一个值是水平半径，第二个值是垂直半径。

.element {
  border-radius: 10px / 20px; /* 水平半径为10px，垂直半径为20px，创建椭圆形状 */
}