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
I'm currently in the process of learning CSS and struggling a bit with it. My main issue right now is trying to make my react components fill the entire height of the browser window. I've been using Display: 'grid' and gridTemplateRows: ...
I have organized my folders exactly how I want them to be. In one specific folder, all of my configuration files reside (most importantly package.json). I am looking to install this package.json configuration in a different path, specifically c\instal ...
I am trying to display a div with an image, its name, size, and download link using jQuery. Here is the code I have created: var image = 'image/example.png' $('#download').attr("href", result2); $('.image').attr("src", re ...
I recently created a custom pipe for the image src in my application: It is applied to selectors like this: <img [src]="myobject?.URL | secure" /> Here's the code snippet for the pipe: import { Pipe, PipeTransform } from '@angular/c ...
I am part of a volunteer group for prostate cancer awareness and support, and our website features multiple YouTube videos that are embedded. However, the page has been experiencing slow loading times due to the number of videos, despite them being hidden ...
By including the detailPanel option, a new column with an icon button will be automatically added. Is there a way to eliminate this additional column that is generated? Appreciate your help! ...
In my current project, I am facing a challenge with integrating two separate dropdowns containing UFC fighter names. The goal is to display a plot showing the KD (Knockdown) data for the selected fighters over time when their names are chosen from both dro ...
After integrating material UI into my existing application, I encountered a peculiar issue. When adding material UI components to modals, the entering animation fails to trigger. Interestingly, downgrading material UI or removing all MUI components resolve ...
How can I customize the border width and color of a polygon/polyhedron created with three.js? The example code below shows a figure, but I'm unsure how to set borders. Are there alternative methods for creating polygons? <html> <head> ...
While working on my project, I encountered a strange error with the react select dropdown. Despite following suggestions online to pass an array of objects as options, I'm still facing the same issue. Surprisingly, when I directly input the data fetch ...
I am attempting to use filtering functionality with a table that is populated via JSON, utilizing bootstrap-table by wenzhixin. HTML snippet: <button class="btn btn-primary" id="filterBtn">Filter</button> <div class="container"> &l ...
After dedicating a full day to investigating this case, I found myself losing hope. const Tests = (state = INIT_STATE, action) => { switch (action.type) { case GET_TEST_DETAIL: return { ...state, test: {}, error ...
For example: v-on:click="count,handle" I posted this question in the Vue gitter channel, but received advice to use a single listener that triggers others. If using one listener is the recommended approach, I am curious to understand why. Is having multi ...
I've been working on a simple weather app in Angular for practice, but I've hit a roadblock. Here's the Angular JSON feed I'm using: app.factory('forecast', ['$http', function($http) { return $http.get('http: ...
Can someone please provide guidance on creating a custom pipe in Angular 8 that converts seconds to hours and minutes? Thank you. <div class="col-2" *ngFor="let movie of moviesList"> <div class="movie"> {{ movie.attributes.title }} ...
Using a regular expression, I am able to locate specific words and then manipulate them in some way. For example: I want to surround all the words I find with <strong> tags: $string = 'Hello, there is foo, after there is bar but now I need fo ...
I am currently in the process of developing a financial application using Vue.js and Vuetify. As part of my project, I have created several component files such as Dashboard.vue Cashflow.vue NetWorth.vue stores.js <- Vue Vuex Throughout my development ...
I'm facing an issue with uploading a file using jQuery AJAX. Although I can see all the details of the file object such as its name and size, when I check the console with formdata.get("files"), the context.request.files size always shows zero. It see ...
Hello, I am currently working on a Google Script web app that enables users to upload 10 photos along with comments for each photo. This information will then be inserted into a Google Sheet when the user clicks the 'upload' button on the web app ...
I am currently using JSF with RichFaces version v.3.3.1.GA. I am trying to decrease the height style of the rich:editor tag (using TinyMCE), but for some reason it does not seem to be changing. <rich:editor id="transactionResult" style="height: 10px;" ...