[Vuejs]-Change bottom shape of map pins with CSS

by

0👍

I created a svg for you took a lot of time. Hope it will help

* {
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: grid;
  place-items: center;
}

.circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: red;
}

.circle::after {
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  content: url("data:image/svg+xml,%3Csvg width='72' height='48' viewBox='0 0 72 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H72V16.7561C70.0823 16.2625 68.0718 16 66 16C52.7451 16 42 26.7452 42 40V48H30V40C30 26.7452 19.2549 16 6 16C3.92822 16 1.91772 16.2625 0 16.7561V0Z' fill='%23FF0000'/%3E%3C/svg%3E");
}
<div class="circle"></div>

Leave a comment