Looking to create a custom image map marker/pin with a unique bottom design resembling a union shape using CSS and Vue.js. I've attempted it myself but haven't been able to achieve the exact look as shown in the reference image. Any advice or assistance you can provide would be greatly appreciated. Thank you in advance!
Take a look at this, if you want to challenge yourself with some math
*,
*::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>UPDATE
Give this a try
*,
*::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>
.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 your unique code here
In my development journey, I created an ASP.NET MVC project using Angular 2 in Visual Studio 2017 and set up node for package management. Here is a snippet from the package.json file: { "version": "1.0.0", "name": "asp.net", "private": true, ... ...
Seeking help to install webpack using npm: sudo npm install -g webpack The following error message is encountered: node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Pre-built binaries not installable for <a href="/cdn- ...
I am currently facing an issue where the content of an object is not being displayed within the Material UI component TableCell. Interestingly, I have used the same approach with the Title component and it shows the content without any problems. function ...
My goal is to add classes one by one [test0 test1 test2] up to 10, with each class being added after one second. $('.rating-block').AddClass('test0 test1 test2 ... test10' ); I am experimenting with the following code, but I don' ...
My goal is to dynamically display photos based on the selected album without refreshing the entire page. Here is my current script: <script type="text/javascript"> function replaceContent(divName, contentS) { document.g ...
I am trying to implement a mouseup event on a series of divs that, when clicked, will reveal a child div ('menu'). All the parent divs have the same class. Here is an example: <div class="container"> <div class="menu"><p>Text ...
Currently, I am attempting to float my navigation bar further towards the left by at least 200px, closer to the end of the line visible below. However, every time I add a margin or padding, it causes the elements within the navigation bar to stack on top o ...
Currently, I am utilizing Next.js along with a custom server (express js) as demonstrated in the GitHub example. For instance, I have a page located at “/post/[id]” that makes use of Next.js dynamic routing. The issue arises when the number of request ...
On my webpage, I have implemented two buttons - "read more" and "read less", using a Page Builder in WordPress. The goal is to hide all elements on the page after the "Read More" button upon loading. When the button is clicked, the "Read More" button shoul ...
When attempting to post a JavaScript variable called posY to a PHP file, an error occurred with the message: Notice: Undefined index: data in C:\xampp\htdocs\Heads_in_the_clouds\submitposY.php The posY variable is defined in the JavaSc ...
I am attempting to utilize ajax to upload a file in Laravel. $("#stepbutton2").click(function(){ var uploadFile = document.getElementById("largeImage"); if( ""==uploadFile.value){ } else{ v ...
Currently, I am attempting to dynamically create a select option using Renderer2. Unfortunately, I am facing difficulties in creating the <Select></Select> element, but I can confirm that the <options> are being successfully created. Due ...
My project has external CSS that contains all the styles for my site. The site looks great in Firefox, but it becomes a mess in Internet Explorer (as usual). Is there a way to write CSS so that specific styles only apply to certain browsers? For example, ...
Currently, I am attempting to iterate through an array of URLs and retrieve responses from a specific set of URLs. The goal is for the outer loop to only proceed after all inner requests have been completed, resulting in the desired outcome as shown below: ...
After attempting to add Bootstrap and Font Awesome to my Angular application, I am encountering issues. I utilized the command npm install --save bootstrap font-awesome and included both libraries in the angular.json file as follows: "styles": ...
Greetings! I am attempting to integrate sound into various buttons and components of a game. I found this code on the PhoneGap website which works perfectly fine during testing: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "h ...
I am struggling to achieve the same outcome with my JavaScript as I do with my PHP code. The issue lies in how JavaScript omits backslashes, unlike PHP. To address this, I have included random forward and backward slashes to cater for different systems. Se ...
I am facing a challenge in updating the style of a specific element after ng-repeat has finished changing the DOM. The directive I have implemented for triggering ng-repeat works perfectly fine when adding items to the model, but it does not get called whe ...
I need to wait for the constructor() function, which contains an asynchronous method handled by Promise. My goal is to wait for two asynchronous methods within the constructor, and then wait for the constructor itself. However, my code is throwing an err ...
Having troubles with Jquery in IE, the code is not working. Can anyone assist me? Please check this on IE and FF (or opera, safari, chrome), select a state, and you'll notice that clubs load but do not appear in IE while they show up in FF. Your hel ...