uniapp css样式盒子上面的箭头样式

m0_692540072024-09-02 11:16

在uniapp中，要创建一个盒子上面的箭头样式，可以使用CSS的伪元素::after或::before来实现。以下是一个简单的例子，展示了如何使用CSS创建一个向上的箭头。

html 复制代码

<template>
  <view class="box">
    <view class="box-content">
      这里是盒子内的内容
    </view>
  </view>
</template>
 
<style>
  .box {
    position: relative;
    width: 200px;
    height: 100px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
  }
 
  .box-content {
    padding: 10px;
  }
 
  .box::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 50%;
    bottom: 100%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #f0f0f0 transparent;
    border-bottom-color: #ccc;
  }
</style>

在这个例子中，.box是包含箭头的盒子，.box::after是用来创建箭头的伪元素。通过调整.box::after的border-width和border-color属性，可以改变箭头的大小和颜色。这里的箭头是向上的，因为border-color的顺序是从上开始，顺时针方向设置的。如果你想要向下、向左或向右的箭头，可以适当调整border-color的顺序和位置