Develop Reference

Change bottom shape of map pins with CSS

I am trying to achieve the below image with few divs, round background with similar to V-shape ( as shown in image below).
So Far I have tried this but could not achieve as in the image. I have added both before and after psuedo code for it. Any Help will be much Appreciated.
// Want to Achieve this:
//So far I have done this:
<template>
<div>
<div class="markar-container">
<button>
<h1>Pin 4</h1>
<div class="outer-circle">
<div class="inner-circle">
<div class="text">AA</div>
</div>
</div>
</button>
</div>
</div>
</template>
CSS:
<style scoped>
.outer-circle {
position: relative;
width: 80px;
height: 80px;
border-radius: 40px;
background-color: #fff;
box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}
.inner-circle {
width: 70px;
height: 70px;
border-radius: 35px;
background: #3ac371;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.text {
position: absolute;
left: 18px;
top: 21px;
font-size: 24px;
color: white;
}
.outer-circle::before {
content: "";
top: 75px;
left: 24px;
border-width: 16px;
border-style: solid;
border-color: transparent #fff transparent transparent;
/* box-shadow: 2px rgba(0, 0, 0, 0.3); */
box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.91);
position: absolute;
transform: rotate(-90deg);
}
.dl-outer-circle::after {
/* position: absolute;
content: "";
top: 73px;
left: 30px;
border-width: 10px;
border-style: solid;
border-color: transparent #3ac371 transparent transparent;
transform: rotate(-90deg); */
}
</style>
// and my pin looks like this:

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>

css animation does not get triggered a second time

I have a problem, which is for sure simple to solve, except for me. Let me explain, the snippet below shows a dialogue-box. I added an interaction feedback. If the input field is empty and a user tries to access the cross, the field blinks red.
In case the input field is set, the cross can be clicked which displays options. If this are clicked too the input field blinks green. The problem: Unfortunately it works just once, even than I try to remove those CSS classes afterwards. Further if green appeared once and the input field is empty again, I can´t trigger the red blinking again.
My thoughts are, that JavaScript can´t remove and add CSS classes during the same time action. Or the animation will not start over again. I am not sure. I would be glad if somebody can enlighten me.
var dialogSettingToggle = document.getElementById("dialog-setting-toggle")
var dialogSettingInput = document.getElementById("dialog-setting-input")
dialogSettingToggle.addEventListener("click", function() {
if (isEmpty(dialogSettingInput.value)) {
dialogSettingInput.classList.toggle("dialog-input-alert")
} else {
dialogSettingToggle.classList.toggle("open")
var dialogSettingContext = document.getElementById("dialog-setting-button-context")
dialogSettingContext.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
var dialogSettingLink = document.getElementById("dialog-setting-button-link")
dialogSettingLink.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
var dialogSettingObject = document.getElementById("dialog-setting-button-object")
dialogSettingObject.addEventListener("click", function() {
dialogSettingInput.classList.remove("dialog-input-alert")
dialogSettingInput.classList.add("dialog-input-confirm")
dialogSettingInput.value = ""
dialogSettingToggle.classList.remove("open")
})
}
})
function isEmpty(str) {
return !str.trim().length
}
body {
height: 100%;
background: #e6e7ee;
}
section {
word-wrap: break-word;
word-break: normal;
width: 95%;
max-width: 350px;
margin: 40px auto;
border-radius: 10px;
}
hr {
color: white;
height: 0px;
cursor: default;
}
h5 {
margin: 10px;
font-size: 1.2em;
font-weight: normal;
color: #7b7e8c;
cursor: default;
}
button {
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
background: #f2f3f7;
cursor: pointer;
border: 0;
padding: 10px;
margin: 7px;
margin-top: 10px;
width: 150px;
font-size: 1rem;
transition-property: background-color, box-shadow;
transition-duration: .2s;
color: #7b7e8c;
}
select {
appearance: none;
width: 270px;
background: url(data:image/png;base64,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);
background-repeat: no-repeat;
background-position: right;
background-size: 1.8em;
border-radius: 10px;
padding: 10px;
margin: 7px;
font-size: 1rem;
color: #7b7e8c;
border: 0;
cursor: pointer;
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
input {
width: 270px;
background: #f8f9fb;
border-radius: 10px;
padding: 10px;
margin: 7px;
font-size: 1rem;
color: #7b7e8c;
border: 0;
cursor: text;
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
button:hover,
select:hover,
input:hover {
color: #3498db;
}
button:active {
box-shadow: 0 0 transparent, 0 0 transparent, inset 3px 3px 5px rgba(0, 0, 0, 0.1), inset -3px -3px 5px white;
}
.border-round {
border-radius: 10px;
}
.dialog {
position: absolute;
left: 0;
right: 0;
padding: 10px 20px 20px;
margin-top: 20px;
width: 340px;
min-height: 100px;
font-size: 1.2em;
background: #f2f3f7;
}
.box-shadow {
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-button-delete {
position: relative;
margin-top: 7px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-close {
position: absolute;
width: 25px;
height: 25px;
padding: 0px;
margin: 0px;
left: 350px;
top: 5px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: none;
}
.dialog-input-alert {
animation: input-alert 1.5s;
}
#keyframes input-alert {
from {
background: red;
color: white
}
to {
background: #f8f9fb;
color: #7b7e8c;
}
}
.dialog-input-confirm {
animation: input-confirm 1.5s;
}
#keyframes input-confirm {
from {
background: greenyellow;
color: white
}
to {
background: #f8f9fb;
color: #7b7e8c;
}
}
/****************************************
******** dialog-setting-toggle ***********
****************************************/
.dialog-setting-toggle {
position: relative;
margin-top: 7px;
margin-right: 7px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.dialog-setting-toggle::before,
.dialog-setting-toggle::after {
content: "";
background: #7b7e8c;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.dialog-setting-toggle::before {
transform: rotate(0deg);
}
.dialog-setting-toggle::after {
transform: rotate(-90deg);
}
.dialog-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.dialog-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.dialog-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.dialog-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.dialog-setting-toggle.open .dialog-setting-button {
opacity: 1;
pointer-events: auto;
}
.dialog-setting-toggle.open .dialog-setting-button:first-of-type {
right: -50px;
justify-content: center;
align-items: center;
}
.dialog-setting-toggle.open .dialog-setting-button:nth-of-type(2) {
right: -100px;
justify-content: center;
align-items: center;
transition-delay: 0.05s;
}
.dialog-setting-toggle.open .dialog-setting-button:last-of-type {
right: -150px;
justify-content: center;
align-items: center;
transition-delay: 0.1s;
}
.dialog-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
color: #7b7e8c;
display: flex;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
}
.dialog-setting-button:hover {
transform: scale(1.2);
color: #3498db;
}
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<section id="dialog-setting" class="dialog box-shadow">
<div>
<h5 style="text-align:center">Options</h5>
<button style="float: right" id="dialog-setting-close" class="dialog-setting-close border-round"><i class="fas fa-times"></i></button>
</div>
<hr class="border-round">
<input style="float: left" id="dialog-setting-input" type="search" placeholder="context / link / object" class="item dialog-setting-input"></input>
<div style="float: right" id="dialog-setting-toggle" class="dialog-setting-toggle">
<div title="Kontext" id="dialog-setting-button-context" class="dialog-setting-button"><i class="fab fa-uncharted"></i></div>
<div title="Link" id="dialog-setting-button-link" class="dialog-setting-button"><i class="fas fa-link"></i></div>
<div title="Objekt" id="dialog-setting-button-object" class="dialog-setting-button"><i class="fas fa-server"></i></div>
</div>
</section>

It isn´t the best solution but it is one solution. I added a timeout with the same duration as the animation goes. Works fine for my needs.
dialogSettingToggle.addEventListener("click", function () {
if (isEmpty(dialogSettingInput.value)) {
dialogSettingInput.classList.add("dialog-input-alert")
setTimeout(function() {
dialogSettingInput.classList.remove("dialog-input-alert")
}, 1000)
} else {
dialogSettingToggle.classList.toggle("open")
var dialogSettingContext = document.getElementById("dialog-setting-button-context")
dialogSettingContext.addEventListener("click", function() {
resetInput()
})
var dialogSettingLink = document.getElementById("dialog-setting-button-link")
dialogSettingLink.addEventListener("click", function() {
resetInput()
})
var dialogSettingObject = document.getElementById("dialog-setting-button-object")
dialogSettingObject.addEventListener("click", function() {
resetInput()
})
}
})
function resetInput() {
dialogSettingInput.classList.add("dialog-input-confirm")
setTimeout(function() {
dialogSettingInput.classList.remove("dialog-input-confirm")
}, 1000)
dialogSettingInput.value=""
dialogSettingToggle.classList.remove("open")
}

Curve border using clip path in css

Hi Here I'm trying to add a speech bubble at the bottom left I used clip-path but the problem is I unable to adjust the pixels properly to look clear and exactly what I want. Can anyone suggest to me how to achieve it and any other alternate way to do it?
My code
body {
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
display: flex;
justify-content: center;
align-items: center;
}
.tolltip {
width: 147px!important;
height: auto;
background: transparent;
border: 4px solid white;
border-radius: 10px 10px 10px 0;
position: relative;
border-bottom-color: transparent;
}
.tolltip:after {
content: "";
position: absolute;
left: -4px;
bottom: -38px;
width: 13px;
height: 72px;
clip-path: polygon(0 0, 4px 0, 4px 37px, 53px 0, 40px 0, 0px 49px);
background: white;
}
.tolltip:before {
content: "";
position: absolute;
left: 8px;
right: 0px;
bottom: 0;
border-bottom: 4px solid white;
}
<div class="tolltip">
<h3>content</h3>
</div>
Trying to achieve this

Here is a different idea:
.tolltip {
width: 147px;
margin: auto;
position: relative;
padding: 10px;
}
.tolltip:before,
.tolltip:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border: 5px solid #fff;
}
.tolltip:before {
top: 0;
right: 0;
border-radius: 15px 15px 15px 0;
clip-path: polygon(0 0, 100% 0, 100% 100%,
25px 100%, /* 25px = after width + border width */
25px calc(100% - 10px), /* 10px is simply a bigger value than border width */
0 calc(100% - 10px),
0 100%);
}
.tolltip:after {
top: 50%;
width: 20px; /* adjust this */
border-top: 0;
border-right: 0;
transform-origin: right;
transform: skewY(-40deg); /* add this */
}
body {
background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
}
<div class="tolltip">
<h3>content</h3>
</div>

Properties image div responsive

I have to modify this script so that the four images contained, keep the properties of height and width in case of responsive effect. At the moment they are being crushed.
Clearly, also keeping the zoom effect inside the div. I've tried everything but I can't. Some idea?
I have really tried everything but I can't understand.
online link:
.module_a {
background:
linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1)
),
url(https://www.woodyvalley.it/prova/img_home/test_1.jpg) ;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100% ;
height: 230px ;
margin: 0px 0 0 0px ;
float: left ;
padding: 0px ;
}
.module_b {
background:
linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1)
),
url(https://www.woodyvalley.it/prova/img_home/test_2.jpg) ;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100% ;
height: 230px ;
margin: 0px 0 0 0px ;
float: left ;
padding: 0px ;
}
.module_c {
background:
linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1)
),
url(https://www.woodyvalley.it/prova/img_home/test_3.jpg) ;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100% ;
height: 230px ;
margin: 0px 0 0 0px ;
float: left ;
padding: 0px ;
}
.module_d {
background:
linear-gradient(
rgba(0, 0, 0, 0.1),
rgba(0, 0, 0, 0.1)
),
url(https://www.woodyvalley.it/prova/img_home/test_4.jpg) ;
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100% ;
height: 230px ;
margin: 0px 0 0 0px ;
float: left ;
padding: 0px ;
}
.cap p {
font-size: 26px ;
font-weight: 200 ;
color: white;
font-family: MorganSansLining;
margin: 0 auto ;
text-align: center ;
bottom: 100px ;
margin-top: 100px ;
}
.zoom {
-moz-transition: all 0.5s ;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.zoom:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1) ;
}
.playBtn {
position: relative;
background-image:url("https://www.woodyvalley.it/prova/images/pre_1.png");
background-size: 60px 60px;
height: 60px;
width: 60px;
top: -90px;
left: 0px;
z-index:999;
}
.playBtn:hover {
position: relative;
background-image:url("https://www.woodyvalley.it/prova/images/post_1.png");
background-size: 60px 60px;
height: 60px;
width: 60px;
top: -90px;
left: 0px;
z-index:999;
}
.container_img {
float: left;
overflow: hidden;
width: 24.99999%;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="container_img responsive">
<a href="vani-light-2.html"><div class="module_a cap zoom" >
<p>TEXT FOR TEST 1</p>
</div></a>
</div>
<div class="container_img responsive">
<a href="gto-light-2.html"><div class="module_b cap zoom" >
<p>TEXT FOR TEST 2</p>
</div></a>
</div>
<div class="container_img responsive">
<a href="vani-3.html"><div class="module_c cap zoom" >
<p>TEXT FOR TEST 3</p>
</div></a>
</div>
<div class="container_img responsive">
<a target="_blank" href="https://youtu.be/ZJp9RcF5FmI"><div class="module_d cap zoom">
<p>TEXT FOR TEST 4</p>
<p class="playBtn"></p>
</div></a>
</div>
<br style="clear: both;">

How can I hide short part of div which is inside the container but show another overflow part

Is it possible to hide short part of div which is inside the container but show another left part overflow.
what I'm saying is that you can simply set the overflow to hidden to hide everything that overflow from particular in that case what I want is the reverse of that.
code:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: #111;
}
.magnifier {
position: relative;
top: 0;
width: 30%;
height: 200px;
background: rgba(230, 230, 230, .1);
border-radius: 10px;
margin: 30px;
box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}
.inside {
position: absolute;
top: 50%;
right: -6px;
width: 13px;
height: 13px;
transform: rotate(45deg);
background: rgba(230, 230, 230, .1);
}
<div class="container">
<div class="magnifier">
<div class="inside"></div>
</div>
</div>
As you can see in the above snippet on the right side of div.magnifier there is div.inside
which I want to show only the outside part looks like an arrow but you see that all parts of that div is being shown.
I know that the above issue is unusual when there is no opacity applied but in my case I want it and also the issue is not causing by the inset on box-shadow.
And if there is any different way that I can do it I'll appreciate that.

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: #111;
}
.magnifier {
position: relative;
top: 0;
width: 30%;
height: 200px;
background: rgba(230, 230, 230, .1);
border-radius: 10px;
margin: 30px;
box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}
.inside {
position: absolute;
top: 50%;
right: -15px;
width: 15px;
height: 15px;
background: rgba(230, 230, 230, .1);
clip-path: polygon(0 0, 50% 50%, 50% 50%, 0% 100%);
}
<div class="container">
<div class="magnifier">
<div class="inside"></div>
</div>
</div>

You can use clip-path function to achieve the same.
i tried these values and got what i suppose you need.
Add this in inside class.
clip-path:polygon(0 0,100% 0 ,100% 100%,90% 100%);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
position: absolute;
width: 100%;
height: 100%;
background: #111;
}
.magnifier {
position: relative;
top: 0;
width: 30%;
height: 200px;
background: rgba(230, 230, 230, .1);
border-radius: 10px;
margin: 30px;
box-shadow: inset 1px 0 rgba(225, 225, 225, .1), inset 1px 2px 6px 7px rgba(225, 225, 225, .1);
}
.inside {
position: absolute;
top: 50%;
right: -8px;
width: 15px;
height: 15px;
background: rgba(230, 230, 230, .1);
transform: rotate(45deg);
clip-path:polygon(0 0,100% 0 ,100% 100%,90% 100%);
}
<div class="container">
<div class="magnifier">
<div class="inside"></div>
</div>
</div>