I have been attempting to craft a rectangle outline using vueJS, but so far I have not had much success. I am hoping to achieve this using only CSS, but despite my efforts, I have not been able to find a solution. My goal is to create something similar to the following example: https://codepen.io/sfdevgirl/pen/fdgkJ
https://i.stack.imgur.com/vA4aH.png
<template>
<div v-bind:style="styleObject"></div>
<div class="shape"
v-for="shape in shapes"
v-bind:key=" shape.shape">
</div>
</template>
<script>
export default {
shapes: [
{ shape: 'square', animate: true }
],
</script>
<Style>
.syleObject {
width: 150px;
height: 150px;
float: left;
margin: 10px;
}
.square {
background-color: blue;
}
</style>