We Keep Coding

How can I adjust the slider correctly?

I want to create a basic slider with javascript. There are images and when I click left and right buttons the images must be changed.
My code doesn't work. Where is my problem? No image changes even if we press the buttons. All my pictures are in jpg format.
(function() {
const pictures = [
"i1",
"i2",
"i3",
"i4",
"i5",
"i6",
"i7"
];
let buttons = document.querySelectorAll(".btn");
let imgDiv = document.querySelector(".img-container");
let counter = 0;
buttons.forEach(function(button) {
button.addEventListener("click", function(e) {
if (button.classList.contains('btn-left')) {
counter--
if (counter < 0) {
counter = pictures.length - 1;
console.log('nnhnhh')
}
imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`
}
if (button.classList.contains('btn-right')) {
counter++
if (counter > pictures.length - 1) {
counter = 0;
}
imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`
}
})
})
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F3ff58;
}
.img-container {
width: 60%;
min-height: 60vh;
background: url("/new_assets/images/i1.jpg") center/cover fixed no-repeat;
border: 0.5rem solid #F3ff70;
border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-ms-border-radius: 0.5rem;
-o-border-radius: 0.5rem;
position: relative;
margin: 4rem auto;
box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.06);
}
.btn-right {
position: absolute;
top: 50%;
right: 0;
background-color: #3B117E;
color: #fff;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
-o-transform: translate(50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
.btn-left {
position: absolute;
top: 50%;
left: 0;
background-color: #3B117E;
color: #fff;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
<div class="img-container">
<a class="btn btn-left"><i class="fas fa-caret-left"></i></a>
<a class="btn btn-right"><i class="fas fa-caret-right"></i></a>
</div>
<script src="/new_assets/js/slider.js"></script>
<script src="https://kit.fontawesome.com/865149e15b.js" crossorigin="anonymous"></script>

Your logic itself is working fine. The problem is because you wrapped the logic in an anonymous function which you never invoke. To fix the problem, unwrap your code.
In addition, the logic can be made more succinct. You can use a single event handler for all .btn elements by adding a data attribute to them which controls what value is added to the counter, along with Math.min() and Math.max() to ensure the counter never goes out of bounds.
const pictures = ["i1", "i2", "i3", "i4", "i5", "i6", "i7"];
let buttons = document.querySelectorAll(".btn");
let imgDiv = document.querySelector(".img-container");
let counter = 0;
buttons.forEach(button => {
button.addEventListener("click", function(e) {
counter += parseInt(e.currentTarget.dataset.dir, 10);
counter = Math.max(Math.min(counter, pictures.length - 1), 0);
imgDiv.style.background = `url('/new_assets/images/${pictures[counter]}.jpg')`;
console.log(counter); // just for debugging
})
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #F3ff58;
}
.img-container {
width: 60%;
min-height: 60vh;
background: url("/new_assets/images/i1.jpg") center/cover fixed no-repeat;
border: 0.5rem solid #F3ff70;
border-radius: 0.5rem;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
-ms-border-radius: 0.5rem;
-o-border-radius: 0.5rem;
position: relative;
margin: 4rem auto;
box-shadow: 10px 10px 35px rgba(0, 0, 0, 0.06);
}
.btn-right {
position: absolute;
top: 50%;
right: 0;
background-color: #3B117E;
color: #fff;
transform: translate(50%, -50%);
-webkit-transform: translate(50%, -50%);
-moz-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
-o-transform: translate(50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
.btn-left {
position: absolute;
top: 50%;
left: 0;
background-color: #3B117E;
color: #fff;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
border: 0.2rem solid #3CBFF8;
font-size: 1.5rem;
padding: 15px;
cursor: pointer;
}
<div class="img-container">
<a class="btn btn-left" data-dir="-1"><i class="fas fa-caret-left"></i></a>
<a class="btn btn-right" data-dir="1"><i class="fas fa-caret-right"></i></a>
</div>
<script src="/new_assets/js/slider.js"></script>
<script src="https://kit.fontawesome.com/865149e15b.js" crossorigin="anonymous"></script>

div auto image slider using JavaScript and CSS

I was making a div that contains images and auto slides after a time interval.
So the interpretation goes like this.
I implemented this code but I have the following problems with it.
it slides to the next image and then again comes back to the first one making it the main visible image on the screen again.
it doesn't go in a loop
Here's code for the same
let holder = document.querySelectorAll('.container')[0],
cards = document.querySelectorAll('.card');
let preActiveCard = cards[1];
let nextActiveCard = cards[2];
function scrollLeft() {
holder.classList.remove('next');
holder.classList.remove('reset');
holder.classList.add('next');
preActiveCard.classList.remove('active');
nextActiveCard.classList.add('active');
setTimeout(reset, 1200);
}
function reset() {
holder.classList.remove('next');
holder.classList.add('reset');
preActiveCard.classList.add('active');
nextActiveCard.classList.remove('active');
}
setInterval(scrollLeft, 1500);
.container {
position: relative;
background: black;
/* max-width: 650px; */
max-width: 80%;
min-width: 650px;
height: 410px;
margin: 0 auto;
overflow: hidden;
}
.card {
position: absolute;
top: 50%;
/* left: 50%; */
left: 30%;
width: 54%;
transform: translate(-50%, -50%);
display: inline-block;
/* width: 340px; */
height: 300px;
margin: 5px;
transition: transform 0.5s, background 0.3s ease-in-out;
}
.card-2 {
background-image: url("livingroom-1.png") !important;
}
.card-3 {
background-image: url("livingroom-2.png") !important;
}
.reset .card {
transition: none;
}
.active {
background: yellow;
transform: translate(-50%, -50%) !important;
/* transform: translate(-50%, -50%) scale(1.1) !important; */
}
/* .card:nth-child(1) {
transform: translate(-170%, -50%);
} */
.card:nth-child(2) {
transform: translate(-50%, -50%);
}
.card:nth-child(3) {
transform: translate(70%, -50%);
}
.card:nth-child(4) {
transform: translate(190%, -50%);
}
.next .card:nth-child(1) {
transform: translate(-290%, -50%);
}
.next .card:nth-child(2) {
transform: translate(-170%, -50%);
}
.next .card:nth-child(3) {
transform: translate(-50%, -50%);
}
.next .card:nth-child(4) {
transform: translate(70%, -50%);
}
.reset .card .card:nth-child(1) {
transform: translate(-170%, -50%);
}
.reset .card .card:nth-child(2) {
transform: translate(-50%, -50%);
}
.reset .card .card:nth-child(3) {
transform: translate(70%, -50%);
}
.reset .card .card:nth-child(4) {
transform: translate(190%, -50%);
}
<div class="container">
<div class="card card-1"></div>
<div class="card card-2 active"></div>
<div class="card card-3"></div>
<div class="card"></div>
</div>
here's the implementation video for reference:
drive link showing the working of my code

<div> figures in search rendering issue

SO I have some code where jQuery and CSS are made to create a close icon after clicking the search icon. It uses the same div elements since it is supposed to animate itself (it doesn't in our case). As I was working (without affecting anything that has to do with the following search icon), I realized one of the divs height is out of place. If you view the CSS, you see that there are two divs with class of 'search2' and one of them is at an improper height or scale. I tried resizing the window and it does not go away.
enter image description here
So I have a search icon with this code:
function toggleSearch(){
$('.mobile-search-button').toggleClass('expand');
}
.mobile-search-button {
position: absolute;
top: 5px;
right: 15px;
width: 50px;
height: 50px;
border: none;
overflow: hidden;
}
.mobile-search-button * {
position: relative;
bottom: 4px;
left: 1px;
}
.search1 {
width: 12px;
height: 12px;
border: 2px solid black;
border-radius: 100px;
}
.search2 {
width: 10px;
height: 2px;
background: black;
-webkit-transform: rotate(45deg) translate(5px,-5px);
-ms-transform: rotate(45deg) translate(5px,-5px);
transform: rotate(45deg) translate(5px,-5px);
}
.search3 {
opacity: 0;
}
.mobile-search-button .search1 {
-webkit-transform: rotate(45deg) translate(5px,-5px) scale(1.75);
-ms-transform: rotate(45deg) translate(5px,-5px) scale(1.75);
transform: rotate(45deg) translate(5px,-5px) scale(1.75);
}
.mobile-search-button .search2 {
-webkit-transform: rotate(45deg) translate(19px,-9px) scale(1.75);
-ms-transform: rotate(45deg) translate(19px,-9px) scale(1.75);
transform: rotate(45deg) translate(19px,-9px) scale(1.75);
}
.mobile-search-button.expand .search1 {
-webkit-transform: rotate(45deg) translate(9px,-10px) scale(5);
-ms-transform: rotate(45deg) translate(9px,-10px) scale(5);
transform: rotate(45deg) translate(9px,-10px) scale(5);
opacity: 0;
}
.mobile-search-button.expand .search2 {
-webkit-transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
-ms-transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
transform: rotate(45deg) translate(9px,-9px) scale(1.75) scaleX(2);
}
.mobile-search-button.expand .search3 {
-webkit-transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
-ms-transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
transform: rotate(-45deg) translate(10px,7px) scale(1.75) scaleX(2);
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleSearch();" class="mobile-search-button" title="Search">
<div class="search1"></div>
<div class="search2"></div>
<div class="search2 search3"></div>
</button>
UPDATE: I changed the height of div.search2 from 2px to 1.75px and it seems to work

I think the CSS could be done simpler.
function toggleSearch() {
$('.mobile-search-button').toggleClass('expand');
}
.mobile-search-button {
position: absolute;
top: 5px;
right: 15px;
width: 50px;
height: 50px;
border: none;
}
.search1,
.search2 {
background: black;
height: 36px;
left: 50%;
margin: -18px 0 0 -2px;
position: absolute;
transition: 200ms;
top: 50%;
width: 4px;
}
.search1 {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.search2 {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.expand .search2 {
background: #dddddd;
border: 4px solid black;
border-radius: 100%;
height: 20px;
left: 7px;
margin: 0;
top: 6px;
width: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="toggleSearch();" class="mobile-search-button" title="Search">
<div class="search1"></div>
<div class="search2"></div>
</button>

Trigger css hover in javascript

So I'm working a coin flip minigame and I need an animation. My code so far is:
HTML:
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="http://i.imgur.com/YS84SGq.png" alt="" />
</div>
<div class="back">
<img src="http://i.imgur.com/lDR0Xj8.png" alt="" />
</div>
</div>
</div>
CSS:
.flip-container
{
position: absolute;
perspective: 1000;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 25%;
}
.flip-container, .flip-container .front, .flip-container .back
{
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
width: 150px;
height: 150px;
overflow: hidden;
}
.front img, .back img
{
width: 150px;
height: 150px;
}
.flip-container .flipper
{
transition: 3s;
transform-style: preserve-3d;
position: relative;
}
.flip-container .flipper .front, .flip-container .flipper .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.flip-container .flipper .front
{
z-index: 2;
transform: rotateY(0deg);
}
.flip-container .flipper .back
{
transform: rotateY(180deg);
}
.flip-container:hover .flipper, .flip-container.hover .flipper
{
transform: rotateY(720deg);
}
A working demo: https://jsfiddle.net/k0pjcftp/
As you can see, animation works fine on hover. But I need to trigger it somehow through javascript, and I have no idea how. I tried adding a css class with transform(...) but animation wasn't working. Any ideas?

You can use jQuery's hover method and toggle the hover class on your container.
$('.flip-container').hover(function() {
$(this).toggleClass('hover');
});
.flip-container
{
position: absolute;
perspective: 1000;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 25%;
}
.flip-container, .flip-container .front, .flip-container .back
{
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
border-radius: 150px;
width: 150px;
height: 150px;
overflow: hidden;
}
.front img, .back img
{
width: 150px;
height: 150px;
}
.flip-container .flipper
{
transition: 3s;
transform-style: preserve-3d;
position: relative;
}
.flip-container .flipper .front, .flip-container .flipper .back
{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.flip-container .flipper .front
{
z-index: 2;
transform: rotateY(0deg);
}
.flip-container .flipper .back
{
transform: rotateY(180deg);
}
/*.flip-container:hover .flipper,*/ .flip-container.hover .flipper
{
transform: rotateY(720deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="http://i.imgur.com/YS84SGq.png" alt="" />
</div>
<div class="back">
<img src="http://i.imgur.com/lDR0Xj8.png" alt="" />
</div>
</div>
</div>

How to draw heart with text in middle?

I found this answer "css: how to draw circle with text in middle?" , but I need the same, but with a heart shape. I found a lot of heart shape figures online, but none of this with text inside. At the same time, I need the heart only with borders, and when click, filled the background.
My code until now:
.heart {
width: 100px;
height: 90px;
font-size: 50px;
color: #fff;
line-height: 100px;
text-align: center;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div class="heart">Heart</div>

In order to get text to appear on the heart, you need to set the heart container as relative and the text inside of it as absolute as shown below.
I set the border of the :before and :after to give the heart a border.
The toggling of the fill uses functionality from YouMightNotNeedJQuery.com.
function toggleFill(heart, className) {
if (!hasClass(heart, className)) {
addClass(heart, className);
} else {
removeClass(heart, className);
}
}
function addClass(el, className) {
if (el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
}
function removeClass(el, className) {
if (el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(
new RegExp('(^|\\b)' + className.split(' ').join('|') +
'(\\b|$)', 'gi'), ' ');
}
}
function hasClass(el, className) {
if (el.classList) {
return el.classList.contains(className);
} else {
return new RegExp('(^| )' + className +
'( |$)', 'gi').test(el.className);
}
}
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.filled:before,
.filled:after {
background: red !important;
}
#wrapper {
width: 300px;
height: 180px;
background: #444;
}
.heart {
position: relative;
top: calc(50% - 45px); /* 1/2 height of wrapper - 1/2 height of heart */
left: calc(50% - 50px); /* 1/2 width of wrapper - 1/2 width of heart */
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
top: 0px;
width: 50px;
height: 80px;
background: inherit;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
}
.heart:before {
left: 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
border-left: 2px solid red;
border-top: 2px solid red;
border-bottom: 1px solid red;
}
.heart:after {
left: 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
border-right: 2px solid red;
border-top: 2px solid red;
border-bottom: 1px solid red;
}
.heart-text {
position: absolute;
top: 0;
left: calc(50px - 30px); /* 1/2 width of heart - 1/2 width of text */
z-index: 100;
line-height: 66px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #FFF;
}
<div id="wrapper">
<div class="heart" onclick="toggleFill(this, 'filled')">
<div class="heart-text unselectable">
Heart
</div>
</div>
</div>

A quick search and there is a good article about creating shapes with CSS over # css-tricks.com that can be seen here.
If we take the example of how to create a heart and extend upon it a little we can get the following snippet that gives you a heart that starts out simply as a border;
(function(){
var heart = document.querySelector('#heart');
heart.addEventListener('click', function(e) {
this.className += ' is--filled'
});
}());
#heart {
position: relative;
width: 100px;
height: 90px;
text-align: center;
font-size: 16px;
position: relative;
}
#heart span {
width: 100%;
display: block;
top: 50%;
margin-top: -16px;
line-height: 16px;
left: 0;
right: 0;
position: absolute;
z-index: 1;
}
#heart.is--filled:before,
#heart.is--filled:after {
background-color: red;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
border: 1px solid red;
transition: background-color .25s ease 0s;
-webkit-transition: background-color .25s ease 0s;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
#heart:before {
border-right: none;
border-bottom: none;
}
#heart:after {
border-left: none;
border-bottom: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id='heart'>
<span>Hey</span>
</div>
</body>
</html>
However, as someone else has mentioned in the comments it may be an easier approach to use images or the canvas element. I say this purely because it may prove difficult to get just the heart border you desire before clicking the heart (easier to see if you run the snippet). You could opt for much softer opaque background color before you click and then transition to red maybe?
Hope this helps you out!

Use pseudo elements of css3.
.text {
position: absolute;
color: #eee;
z-index: 99;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="heart">
<div class="text">ABC</div>
</div>

Use this
HTML
$('#change').click(function() {
var className = $(this).attr('class');
if(className == "heart"){
$(this).removeClass('heart');
$(this).addClass('heart1');
}
else{
$(this).removeClass('heart1');
$(this).addClass('heart');
}
});
.txt{
z-index:1;
font-size: 20px;
color: #000;
position:relative;
text-align:center;
top:15px;
right:5px;
}
.heart {
width: 100px;
height: 90px;
}
.heart1 {
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: yellow;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart1:before,
.heart1:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart1:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change" class="heart"><div class="txt">Heart</div></div>