I am working on project with VueJS add vutify I have created a component with cards that include two cards. I should display dots around cards on two different versions, one for desktop and one mobile:
Until now, I have achieved to display dots for desktop.
I have created dots on bottom and left for desktop by UX/UI. Into v-card component, I have given position relative v-image as parent and dots position absolute as child. after that, I have styles with CSS. I have used background-image: radial-gradient(#F1191D 20%, #ffffff00 20%); to create dots. I am sharing my code, what I have created until now for version desktop/ Feel free to testing it on codepene
.v-image__image {
z-index: 0;
}
.v-image {
overflow: initial;
width: calc(100% - 20px);
}
.dot {
background-image: radial-gradient(#F1191D 20%, #ffffff00 20%);
background-position: 0 0;
background-size: 10px 10px;
height: 100%;
width: 100%;
background-repeat: repeat;
position: absolute;
left: -23px;
top: -23px;
z-index: -1;
}
.reds{
background-image: radial-gradient(#F1191D 20%, #ffffff00 20%);
}
.bottom{
top: 4px;
bottom: 0;
right: -19px;
left: initial;
height: calc(100% + 18px);
}<div id="app">
<v-app>
<v-container>
<v-layout row>
<v-flex md6 class="pa-4">
<v-card>
<v-img src="https://i.postimg.cc/KzhTN7KJ/Group-16.jpg" class="hidden-sm-and-down position-relative overflow-visible "><div class="dot reds bottom"></div></v-img>
<v-img src="https://i.postimg.cc/MG62jN5D/Group-17.jpg" class="hidden-md-and-up position-relative"><div class="dot reds bottom"></div></v-img>
</v-card>
</v-flex>
<v-flex md6 class="pa-4">
<v-card>
<v-img src="https://i.postimg.cc/KzhTN7KJ/Group-16.jpg" class="hidden-sm-and-down position-relative overflow-visible "><div class="dot reds bottom"></div></v-img>
<v-img src="https://i.postimg.cc/MG62jN5D/Group-17.jpg" class="hidden-md-and-up position-relative"><div class="dot reds bottom"></div>
</v-img>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>At the same logic styles, I should to create dots for version mobile, but this time I should to used three times dots on top-bottom any idea how I can create might with pseudo selector CSS :before or after.? Any idea? Version for mobile should to be exactly by figma:
