WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <link rel="stylesheet" href="./style.css"> </head> <body> <img src="https://assets.codepen.io/1480814/goku-_1.png" alt="Goku"> <img src="https://assets.codepen.io/1480814/veg-.png" alt="Vegeta"> </body> </html>
img { --s: min(50vw,360px); /* control the size */ width: var(--s); aspect-ratio: 1; object-fit: cover; object-position: top; padding: calc(var(--s)/4) calc(var(--s)/8) 0; box-sizing: border-box; background: conic-gradient(from 135deg at 50% 15%,#e0dee1,#28a6b5 25%,#0000 0); clip-path: polygon(-50% 0,150% 0,50% 100%); transition: .5s; cursor: pointer; } img:hover { padding: 0; } body { margin: 0; min-height: 100vh; display: grid; place-content: center; grid-template-columns: auto auto; background: url('https://sm.ign.com/ign_es/news/c/confirmado/confirmado-trunks-estara-en-dragon-ball-fighterz_nvrd.png') no-repeat center center/cover; }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Andev Web</title> <link rel="stylesheet" href="./style.css"> </head> <body> <img src="https://assets.codepen.io/1480814/goku-_1.png" alt="Goku"> <img src="https://assets.codepen.io/1480814/veg-.png" alt="Vegeta"> </body> </html>
img { --s: min(50vw,360px); /* control the size */ width: var(--s); aspect-ratio: 1; object-fit: cover; object-position: top; padding: calc(var(--s)/4) calc(var(--s)/8) 0; box-sizing: border-box; background: conic-gradient(from 135deg at 50% 15%,#e0dee1,#28a6b5 25%,#0000 0); clip-path: polygon(-50% 0,150% 0,50% 100%); transition: .5s; cursor: pointer; } img:hover { padding: 0; } body { margin: 0; min-height: 100vh; display: grid; place-content: center; grid-template-columns: auto auto; background: url('https://sm.ign.com/ign_es/news/c/confirmado/confirmado-trunks-estara-en-dragon-ball-fighterz_nvrd.png') no-repeat center center/cover; }
/* Replace with your JS Code (Leave empty if not needed) */