User:HINK/common.css: Difference between revisions
Jump to navigation
Jump to search
(Replaced content with ".diamond-image { position: relative; width: 150px; →Adjust the width as needed: height: 150px; →Adjust the height as needed: overflow: hidden; margin: 20px; →Adjust the margin as needed: transform: rotate(45deg); →Rotate the container: box-sizing: border-box; border: 2px solid black; →Border width and color: } .diamond-image .thumbinner { width: 100%; height: 100%; overflow: hidden; transform: rotat...") Tag: Replaced |
No edit summary |
||
Line 1: | Line 1: | ||
.diamond-image { | .diamond-image-wrapper { | ||
position: relative; | position: relative; | ||
width: 150px; /* Adjust the width as needed */ | width: 150px; /* Adjust the width as needed */ | ||
height: 150px; /* Adjust the height as needed */ | height: 150px; /* Adjust the height as needed */ | ||
margin: 20px; /* Adjust the margin as needed */ | margin: 20px; /* Adjust the margin as needed */ | ||
} | } | ||
.diamond-image | .diamond-image { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
overflow: hidden; | overflow: hidden; | ||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); | |||
border: 2px solid black; /* Border width and color */ | |||
box-sizing: border-box; | |||
} | } | ||
.diamond-image | .diamond-image img { | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
object-fit: cover; /* Ensures the image covers the container */ | object-fit: cover; /* Ensures the image covers the container */ | ||
} | } |
Revision as of 21:04, 21 June 2024
.diamond-image-wrapper {
position: relative;
width: 150px; /* Adjust the width as needed */
height: 150px; /* Adjust the height as needed */
margin: 20px; /* Adjust the margin as needed */
}
.diamond-image {
width: 100%;
height: 100%;
overflow: hidden;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
border: 2px solid black; /* Border width and color */
box-sizing: border-box;
}
.diamond-image img {
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image covers the container */
}