How to create a div img that continue around grid pixel in right-top and left-bottom?

Question

I created a div that continue img, around img I should include same grid pixel in top-left, and right-bottom.

I am sharing my code below:

.pixel {
  width: 10px;
  height: 10px;
  box-shadow: 10px 10px #C7B273;
  /* position: absolute;
    top: -20px;
    right: -25px;
    z-index: -1; */
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

img {
  width: 400px;
  /* height: 350px; */
}





  
  
  
  Grid images px

After this my result is like in the picture:

But my finally results should be exactly by the UI/UX as in the picture.

Any idea how I can create this with css:

user_8274308 · Answer

I think this is what you need:

Use repeating-radial-gradient to make the dots.
Use background-size to fix the ratio as a square (in this case 10x10).

The transform: translateX(0) is used to trigger a separate layer for the image, so it keeps on top (not overlapped by the dots as they are position: absolute). Feel free to play with sizes and positioning as you need, I just wanted to keep a high fidelity from the example.

body {
  display: flex;
  place-content: center;
}

.container {
  position: relative;
  margin: 30px; /* to ensure the dots are visible */
}

.top-left,
.bottom-right {
  position: absolute;
  background-image: repeating-radial-gradient(#C7B273, #C7B273 1px, transparent 1px, transparent 10px);
  background-size: 10px 10px;
  width: 200px;
  height: 80px;
}

.top-left {
  top: -30px;
  left: -30px;
}

.bottom-right {
  bottom: -30px;
  right: -30px;
}

.content {
  width: 200px;
  height: 200px;
  background-color: skyblue;
  transform: translateX(0);
}

user_9763272 · Answer





    
    
    
    Grid images px

I hope this snippet help you, this is not should be exactly by the UI/UX as in the picture. you need to modify before and after with background-image from your UI/UX image

user_9174312 · Answer





    
    
    
    Grid images px

Maybe this should do the trick. I have taken over the answer of "Hery Kurniawan"

user_17716837 · Answer

I use Javascript, css Grid for this... the runnable Jfiddle is in the end of the explation.

JavaScript Explanation

for this, I used JavaScript for creating pixel elements using a for loop

so now all the JavaScript generated elements will have the same style (CSS)

the generated element is now is child of the parent .pixel-container because of using .innerHTML

the trick here is using += that get the already written html and put your code (.pixel div child)

...

this code is inside a function named createPixel(); ,

every time you will write it, it will create a pixel! so i looped it (code below)

let pixelContainer = document.querySelectorAll('.pixel-container');

let numPixel = 100 - 1; // is because one pixel is already created

function createPixel() {
    /* create a pixel in your top left corner */
    pixelContainer[0].innerHTML += '';

    /* create a pixel in your top right corner */
    pixelContainer[1].innerHTML += '';
}

/* lopping the createPixel() */
for (let index = 0; index < numPixel; index++) {
    createPixel();
}

css Explanation

I used grid for creating a repeated 10 times horizontally the .pixel div

grid-template-columns: repeat(10, auto);

and some gap gap: 0.5em; in the parent element so all child now have something similar to margins :)

the idea

the idea is creating a parent div with position: relative

and with the parent of pixel child put position: absolute

now position them with top, bottom, left, right (code below)

* {
    /* css variable, easy to change (one time for all) */
    --outside-value: -2em;
}

#content {
    position: relative;
}

.pixel-container.pixel-bottom {
    position: absolute;
    top: var(--outside-value);
    left: var(--outside-value);
}

.pixel-container.pixel-top {
    position: absolute;
    bottom: var(--outside-value);
    right: var(--outside-value);
}

html Explanation

I created a parent element #content, so won't be the parent (now you can work quiet on your html, without affecting the image and the pixels)

...

the .pixel divs are inside their parent

there is 2 parent (.pixel-container) that have inside the pixel div childs,

the first I assegned the class pixel-top and the second pixel-bottom

runnable Jffidle

let pixelContainer = document.querySelectorAll('.pixel-container');

let numPixel = 100 - 1; // is because one pixel is already created

function createPixel() {
    /* create a pixel in your top left corner */
    pixelContainer[0].innerHTML += '';

    /* create a pixel in your top right corner */
    pixelContainer[1].innerHTML += '';
}

/* lopping the createPixel() */
for (let index = 0; index < numPixel; index++) {
    createPixel();
}

/* easy to change a value 
   one time of all your css  
*/

* {
    --gold-color: #C7B273;
    --pixel-size: 0.2em;
    --outside-value: -2em;
}

html,
body {
    height: 100%;
}


/* centering */

body,
#content {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* pixel css */

.pixel {
    height: var(--pixel-size);
    width: var(--pixel-size);
    background-color: var(--gold-color);
    border-radius: 50%;
}

img {
    width: 400px;
    z-index: 2;
}


/* repeating */

.pixel-container {
    display: grid;
    grid-template-columns: repeat(10, auto);
    gap: 0.5em;
}


/* positioning */

#content {
    position: relative;
}

.pixel-container.pixel-bottom {
    position: absolute;
    top: var(--outside-value);
    left: var(--outside-value);
}

.pixel-container.pixel-top {
    position: absolute;
    bottom: var(--outside-value);
    right: var(--outside-value);
}





    
    
    
    Document