CSS画流程图的圆角菱形，完美解决
在CSS中，我们可以使用border-radius属性来创建圆角菱形。以下是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS圆角菱形</title>
<style>
.diamond {
width: 100px;
height: 100px;
background-color: #4CAF50;
position: relative;
left: 50%;
margin-left: -50px; /* 使圆角菱形居中 */
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
transform: rotate(45deg); /* 旋转45度 */
}
</style>
</head>
<body>
<div class="diamond"></div>
</body>
</html>这段代码会创建一个旋转45度的圆角菱形，并使其水平居中。通过调整width和height，您可以改变菱形的大小。调整border-radius的值可以改变菱形的圆角半径。
评论已关闭