利用定义根css--arrow-size
,用var(--arrow-size)
取值,用calc( -1 * var(--arrow-size) )
取负
<script setup>
let arrowSize = '10px'
</script>
<template>
<div class="arrow" :style="{ '--arrow-size':arrowSize }"></div>
</template>
.arrow{
margin: auto;
width: 0px;
height: 0px;
transform: translate( calc( -1 * var(--arrow-size) ), calc( -1 * var(--arrow-size) ) );
}
.arrow:before{
content: "";
border-top: var(--arrow-size) solid transparent;
border-right: var(--arrow-size) solid transparent;
border-bottom: var(--arrow-size) solid #d3dce6;
border-left: var(--arrow-size) solid transparent;
}