如何創建下面的影像映射標記/引腳，特別是底部設計，看起來像 CSS 和 vue js 中的聯合形狀。已嘗試但未獲得與下圖相同的外觀。非常感謝您的任何幫助。提前致謝！
uj5u.com熱心網友回復：
看看這個，需要做一些數學100%你可以玩它
*,
*::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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/453587.html
標籤：javascript html css Vue.js 谷歌地图标记
上一篇：我需要反應路由器V5中的嵌套路由