网站开发进阶纯CSS画的基本图形（矩形、圆形、三角形
以下是使用纯CSS绘制矩形、圆形和三角形的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本图形</title>
<style>
/* 矩形 */
.rectangle {
width: 100px;
height: 50px;
background-color: #3498db;
}
/* 圆形 */
.circle {
width: 50px;
height: 50px;
background-color: #e74c3c;
border-radius: 50%; /* 使宽高相等的div变成圆形 */
}
/* 三角形 */
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f1c40f;
}
</style>
</head>
<body>
<div class="rectangle"></div>
<div class="circle"></div>
<div class="triangle"></div>
</body>
</html>这段代码定义了三个CSS类：.rectangle、.circle和.triangle，分别用于绘制矩形、圆形和三角形。矩形使用了固定的宽高；圆形通过border-radius属性将正方形变为圆形；三角形则是通过border属性的透明性来制造出三角形的形状。
评论已关闭