持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

前言

啊哈，各位，我又来了。今给大家带来用css实现地图标记点，由于标记点又有点像花瓣，就顺势画朵花送给各位吧。话不多说，上代码吧。

标记点

首先，先来看看地图标记点。看看页面结构。

<div class="box">
    <div class="biaoji">
        <div class="circle"></div>
    </div>
</div>

这个标记呢，三边圆，一边尖，中间一个小圆圈。所以我们的样式应该这样写。

.biaoji {
    width: 100px;
    height: 100px;
    background-color: rgb(251, 169, 15);
    border-radius: 100% 100% 0 100%;
    transform: rotate(45deg);
    position: relative;
}
.circle {
    width: 30px;
    height: 30px;
    border: 10px solid #fff;
    border-radius: 50%;
    background-color: #abc;
    position: absolute;
    top: 25%;
    left: 25%;
}

看看效果吧。

说实话，看着又有点像花瓣，那就组合一下，看能画成一朵梅花♣️不。

梅花♣️

页面结构改一下：

<div class="box">
    <div class="huaban one">
    </div>
    <div class="huaban two">
    </div>
    <div class="huaban three">
    </div>
    <div class="huaban four">
    </div>
</div>

对每个花瓣的形状进行绘制，然后让他们浮动聚合在一块。

.box {
    width: 210px;
    height: 210px;
    margin: 50px;
    transform: rotate(45deg);
}
.huaban {
    width: 100px;
    height: 100px;
    background-color: #000;
    float: left;
    border: 5px solid red;
}

.one {
    border-radius: 100% 100% 0 100%;
    border-right: 0;
    border-bottom: 0;
}
.two {
    border-radius: 100% 100% 100% 0;
    border-left: 0;
    border-bottom: 0;
}
.three {
    border-radius: 100% 0 100% 100%;
    border-top: 0;
    border-right: 0;
}
.four {
    border-radius: 0 100% 100% 100%;
    border-top: 0;
    border-left: 0;
}

这时候我们就得到了它：

那既然都到了这一步了，再优化一下，让他更像一朵花。

<div class="box">
    <div class="huaban one">
    </div>
    <div class="huaban two">
    </div>
    <div class="huaban three">
    </div>
    <div class="huaban four">
    </div>
    <div class="circle"></div>
</div>

.box {
    width: 210px;
    height: 210px;
    margin: 50px;
    /* transform: rotate(45deg); */
    /* animation: rotate 1s linear infinite; */
    position: relative;
}

.box .circle{
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 38%;
    left: 38%;
}

♣️ 版本2

html结构不变，我们只需要对css进行一点点小改动，就得到了它。

<div class="box">
    <div class="huaban one">
    </div>
    <div class="huaban two">
    </div>
    <div class="huaban three">
    </div>
    <div class="huaban four">
    </div>
</div>

.box {
    width: 200px;
    height: 200px;
    margin: 50px;
}
.huaban {
    width: 100px;
    height: 100px;
    background-color: #abc;
    float: left;
}

.one {
    border-radius: 0 100% 0 100%;
}
.two {
    border-radius: 100% 0 100% 0;
}
.three {
    border-radius: 100% 0 100% 0;
}
.four {
    border-radius: 0 100% 0 100%;
}

总结

其实吧，本来本文是想实现地图标记点的，然后写点让他上下跳动的动画，没想到写着写着画风有点变了，毕竟画个花也挺不错是吧。啊哈哈，那就写个花花送给大家，端午节快乐呦～