'How to make dots with css background-image: repeating-radial-gradient around cards on vutify

I am working on project Vue.js add vutify. I have created a component with cards that include the image. Around images, I should to created dots with CSS I should to use repeating-radial-gradient to make dots.

I have created same things in HTML and CSS, but is difficult for me  to adjust dots around images  on vutify.

      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(#F1191D, #F1191D 1px, transparent 1px, transparent 10px);
            background-size: 10px 10px;
            width: 200px;
            height: 200px;
        }
        
        .top-left {
            top: -20px;
            left: -20px;
        }
        
        .bottom-right {
            bottom: -20px;
            right: -20px;
        }
        
        img {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translateX(0);
        }
    </style>
     <div class="container">
            <div class="top-left"></div>
            <div class="bottom-right"></div>

            <img src="https://cdn.vuetifyjs.com/images/cards/cooking.png" alt="">


        </div>

Any idea about it?

I am sharing my code, What I have created with HTML and CSS.

By this example I want to do the same thing in cards vutify. I am sharing my code for vutify card.

<template>
 <v-container fluid  > 
        <v-row class="justify-center  ">  
            <v-col cols="12" md="8">
     
                  <v-row >  
                        <v-col cols="12" md="6"   class="pl-md-4 pr-md-4  ">
                            <v-card  >     
                                   <v-img  src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
></v-img>  
                                             
                            </v-card>
  
                         </v-col>
                    </v-row>
              </v-col>
          </v-row>
   </v-container>
</template>
Can anyone idea how I can adjust dots with CSS to achieve the same things as example with HTML as I mention above.?
javascripthtmlcss


Solution 1:[1]

you can use only the img tag to achieve the same effect:

img {
  background: radial-gradient(#F1191D 1px, #0000 1px) 0 0/10px 10px;
  clip-path: polygon(
    0 0,
    calc(100% - 40px) 0,calc(100% - 40px) 20px,calc(100% - 20px) 20px,calc(100% - 20px) 40px,100% 40px,
    100% 100%,
    40px 100%,40px calc(100% - 20px),20px calc(100% - 20px),20px calc(100% - 40px),0 calc(100% - 40px)
   );
  padding: 20px;
  width: 200px;
}
<img src="https://cdn.vuetifyjs.com/images/cards/cooking.png" >

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Temani Afif

Related Questions