Anchor (product image with badge - by KP)

21.1.2026

CSS CSS trick

index.html Raw #

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <style>
    
    .Card {
	border: 1px solid gray; 
	border-radius: .75rem;
	padding: 1rem;
	background: lightgray;
	
	img {
		max-width: 100%;
		border-radius: .75rem;
		anchor-name: --product-image;
	}
	
	.badge {
		
		position: absolute;

		
		position-anchor: --product-image;
		bottom: calc(anchor(bottom) + 10px);
		right: calc(anchor(right) + 10px);
		
		background: green;
		padding: 0.25rem 0.65rem;
		border-radius: 100vw;
		color: white;
	}
}
    
  </style>
</head>
<body>

	

	<div class="Card">
		
		<h1>Classic line Solicí řeznická dusitanová směs PRAGANDA - RYCHLOSŮL 1kg</h1>
		
		<img src="https://picsum.photos/id/92/800/600" alt="">
		
		<div class="badge">Zlevněno</div>
	</div>
</body>
</html>

demo.txt Raw #

https://jsbin.com/cawipexoma/edit?html,css,output