User:HINK/common.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
.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 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.diamond-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover; /* Ensures the image covers the container */
}
.diamond-image::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid black; /* Border width and color */
box-sizing: border-box;
clip-path: inherit; /* Apply the same clipping to the border