'Custom Map markar /pin for Map component

How can I create the below image map markar/pin, specially the bottom design that looks like union shape with CSS and in vue js. Have tried but not getting the same look as in the image below. Any help from you much appreciated. Thanks in Advance!

javascripthtmlcssvue.jsgoogle-maps-markers


Solution 1:[1]

Check this out, need to do some math for 100% you can play with it

*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background-color: bisque;
  margin: 0;
  
}

.box-1,
.box-2,
.box-3,
.box-4,
.box-5,
.box-6,
.box-7{
  left:0;
  right: 0;
  top:0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

.box-1{
  position: absolute;
  width: 115px;
  height: 115px;
  border-radius: 100%;
  background-color: rgba(255, 0, 0, 0.6);
  z-index: 5;
}

.box-2{
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 100%;
  background-color: white;
  z-index: 4;
}

.box-3{
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background-color: #c8cbd0;
  
  z-index: 3;
}

.box-4{
  position: absolute;
  width:55px;
  height: 25px;
  top:140px;
  background-color: white;
  z-index:6;
  
}

.box-5{
  width:22px;
  height: 25px;
  background-color: bisque;
  z-index: 7;
  top: 143px;
  left:33px;
  border-top-left-radius: 100%;
  border-top: 5.5px solid #c8cbd0;
  border-left: 5.5px solid #c8cbd0;
  
}

.box-6{
  width:22px;
  height: 25px;
  background-color: bisque;
  z-index: 7;
  top: 143px;
  right:33px;;
  border-top-right-radius: 100%;
  border-top: 5.5px solid #c8cbd0;
  border-right: 5.5px solid #c8cbd0;

}
.box-7{
  width:21.6px;
  height: 5px;
  background-color: #c8cbd0;
  z-index:8;
  top:170px;
}

.box-8{
  position: relative;
  z-index: 10;
  font-weight: 900;
  font-size: 1.5rem;
}
  <div class="box-1"></div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
  <div class="box-5"></div>
  <div class="box-6"></div>
  <div class="box-7"></div>
  <div class="box-8">
    <p>HELLO</p>
  </div>

EDIT

Try this

*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  background-color: bisque;
  margin: 0;
  
}

.box-1,
.box-2,
.box-3,
.box-4,
.box-5,
.box-6,
.box-7{
  left:0;
  right: 0;
  top:0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

.box-1{
  position: absolute;
  width: 115px;
  height: 115px;
  border-radius: 100%;
  background-color: rgba(255, 0, 0, 0.6);
  z-index: 5;
}

.box-1 p {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  margin: 0;
  font-weight: 900;
  font-size: 1.5rem;
}

.box-2{
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 100%;
  background-color: white;
  z-index: 4;
}

.box-3{
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background-color: #c8cbd0;
  
  z-index: 3;
}

.box-4{
  position: absolute;
  width:55px;
  height: 25px;
  top:140px;
  background-color: white;
  z-index:6;
  
}

.box-5{
  width:22px;
  height: 25px;
  background-color: bisque;
  z-index: 7;
  top: 143px;
  left:33px;
  border-top-left-radius: 100%;
  border-top: 5.5px solid #c8cbd0;
  border-left: 5.5px solid #c8cbd0;
  
}

.box-6{
  width:22px;
  height: 25px;
  background-color: bisque;
  z-index: 7;
  top: 143px;
  right:33px;;
  border-top-right-radius: 100%;
  border-top: 5.5px solid #c8cbd0;
  border-right: 5.5px solid #c8cbd0;

}
.box-7{
  width:21.6px;
  height: 5px;
  background-color: #c8cbd0;
  z-index:8;
  top:170px;
}
  <div class="flex-container">
      <div class="box-1">
        <p>HELLO</p>
      </div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
  <div class="box-5"></div>
  <div class="box-6"></div>
  <div class="box-7"></div>

Solution 2:[2]

.container {
 box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.box-1,
.box-2,
.box-3,
.box-4,
.box-5,
.box-6,
.box-7 {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
}

.box-1 {
  position: absolute;
  width: 115px;
  height: 115px;
  border-radius: 100%;
  background-color: rgba(255, 0, 0, 0.6);
  z-index: 5;
}

.box-1 p {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  margin: 0;
  font-weight: 900;
  font-size: 1.5rem;
}

.box-2 {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 100%;
  background-color: white;
  z-index: 4;
}

.box-3 {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  background-color: #c8cbd0;
  z-index: 3;
}

.box-4 {
  position: absolute;
  /* width: 55px; */
  width: 15px;
  height: 25px;
  top: 140px;
  right: -5px;
  background-color: white;
  z-index: 6;
}

.box-5 {
  width: 18px;
  height: 22px;
  z-index: 7;
  top: 147px;
  left: 28px;
  border-top-left-radius: 100%;
  border-top: 5.5px solid #c8cbd0;
  border-left: 5.5px solid #c8cbd0;
}


.box-6 {
  width: 18px;
  height: 22px;
  /* background-color: bisque; */
  z-index: 7;
  top: 147px;
  right: 18px;
  border-top-right-radius: 100%;
  border-top: 5.5px solid #c8cbd0;
  border-right: 5.5px solid #c8cbd0;
}

/* bottom line*/
.box-7 {
  width: 15px;
  height: 5px;
  background-color: #c8cbd0;
  z-index: 8;
  top: 164px;
  left: 5px;
}
<div class="container">
<button class="">
  <div class="box-1">
    <p>Hello</p>
  </div>
  <div class="box-2"></div>
  <div class="box-3"></div>
  <div class="box-4"></div>
  <div class="box-5"></div>
  <div class="box-6"></div>
  <div class="box-7"></div>

</button>
  </div>
enter code here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ayesha

Related Questions