User:HINK/common.css: Difference between revisions

From bg3.wiki
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 */
    overflow: hidden;
     margin: 20px; /* Adjust the margin as needed */
     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 {
.diamond-image {
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     overflow: hidden;
     overflow: hidden;
     transform: rotate(-45deg); /* Rotate the inner container back */
     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 .thumbinner img {
.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 */
    transform: rotate(0deg); /* Ensure the image remains upright */
}
}

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 */
}