动态绑定css

最新推荐文章于 2024-04-03 04:36:18 发布

SanOrintea

最新推荐文章于 2024-04-03 04:36:18 发布

阅读量776

点赞数

分类专栏： vue css 文章标签： css css3 html

本文链接：https://blog.csdn.net/SanOrintea/article/details/126099298

版权

vue 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

利用定义根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;
}