生成一个空心菱形的Vue代码
时间: 2024-05-24 19:10:17 浏览: 12
<template>
<div class="diamond">
<div class="row">
<div class="empty"></div>
<div class="filled"></div>
<div class="empty"></div>
</div>
<div class="row">
<div class="filled"></div>
<div class="empty"></div>
<div class="filled"></div>
</div>
<div class="row">
<div class="empty"></div>
<div class="filled"></div>
<div class="empty"></div>
</div>
</div>
</template>
<style>
.diamond {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.row {
display: flex;
}
.empty {
width: 20px;
height: 20px;
background-color: transparent;
border: 1px solid black;
}
.filled {
width: 20px;
height: 20px;
background-color: black;
}
</style>