css绘制一个Pinia小菠萝
warning:
这篇文章距离上次修改已过442天，其中的内容可能已经有所变动。
以下是使用CSS绘制一个简单的Pinia小菠萝形状的代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pinia Pea</title>
<style>
.pea {
position: relative;
width: 100px;
height: 100px;
background-color: #FFD700;
border-radius: 50%;
box-shadow: 0px 5px 0px #FFD700;
}
.pea::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 100px;
background-color: #000000;
border-radius: 0 0 50px 50px;
transform: translate(-50%, -50%);
}
.pea::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 50px;
background-color: #FFD700;
border-radius: 50px 50px 0 0;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="pea"></div>
</body>
</html>这段代码使用了CSS中的伪元素::before和::after来创建小菠萝的形状和颜色。主体部分是一个圆形，伪元素::before用于创建黑色的部分，而::after用于创建黄色的部分。这个示例提供了一个简单的起点，你可以根据需要调整尺寸、颜色和其他样式来适应不同的设计要求。
评论已关闭