使用css制作男和女的图标

在前端开发中，你可以使用多种方式来制作男性和女性的图标。以下是一个简单的方法，使用纯CSS来创建这两个图标：

1. HTML结构：

<div class="icon male"></div>
<div class="icon female"></div>

2. CSS样式：

.icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #ccc;
    position: relative;
    margin: 10px;
}

.male::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 35%;
    width: 30%;
    height: 20%;
    background-color: #000;
    border-radius: 50px 50px 0 0;
    transform: translateY(-50%);
}

.female::before,
.female::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 40%;
    width: 20%;
    height: 50%;
    background-color: #000;
    border-radius: 20px;
}

.female::after {
    left: 60%;
}

解释：

• .icon 类为两个图标提供了基本的圆形形状和背景色。
• .male::before 使用伪元素创建了一个男性的简单表示，即一个上半圆。
• .female::before 和 .female::after 使用两个伪元素创建了两个圆圈，代表女性的简单表示。

当然，这只是一个非常简化的示例。在真实的项目中，你可能需要使用更复杂的图形或图标库，如FontAwesome、Material Icons等，或者使用SVG图标来获得更好的可定制性和清晰度。

如果你想要更加详细或复杂的图标，我建议查看这些图标库或考虑使用SVG。