css绘制常见的一些图形

图形"/>

css绘制常见的一些图形

以下是在CSS中绘制常见图形的示例代码：

1. 线条：

.line {width: 100px;height: 1px;background-color: black;
}

1. 箭头：

.arrow {width: 0;height: 0;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid black;
}

1. 三角形：

.triangle {width: 0;height: 0;border-top: 50px solid transparent;border-left: 50px solid black;border-bottom: 50px solid transparent;
}

1. 矩形：

.rectangle {width: 100px;height: 50px;background-color: black;
}

1. 圆：

.circle {width: 50px;height: 50px;border-radius: 50%;background-color: black;
}

1. 椭圆：

.ellipse {width: 100px;height: 50px;border-radius: 50%;background-color: black;
}

1. 平行四边形：

.parallelogram {width: 100px;height: 50px;transform: skewX(20deg);background-color: black;
}

1. 菱形：

.rhombus {width: 0;height: 0;border: 50px solid black;border-right-color: transparent;border-left-color: transparent;transform: rotate(45deg);
}

1. 梯形：

.trapezoid {width: 100px;height: 0;border-top: 50px solid black;border-left: 25px solid transparent;border-right: 25px solid transparent;
}