【快应用】倒三角怎么实现

​现象描述

在快应用中使用border来实现一个倒三角，未能实现预想的效果。联盟可以，华为不行。

代码如下：

<template>

  <div class="triangle-container">

    <div class="triangle-area">

      <text class="triangle-text">领取</text>

      <div class="triangle-icons"></div>

    </div>

  </div>

</template>

<style lang="less">

  .triangle-container {

    width: 100%;

    height: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    .triangle-area {

      width: 100%;

      height: 100%;

      display: flex;

      justify-content: center;

      align-items: center;

      flex-direction: column;

      .triangle-text {

        width: 100%;

        height: 50px;

        background-color: #7584f9;

        border-radius: 10px;

        font-size: 25px;

        text-align: center;

        line-height: 50px;

        color: #fff;

      }

      .triangle-icons {

        width: 0;

        height: 0;

        border-top: 15px solid #7584f9;

        border-right: 15px solid transparent;

        border-left: 15px solid transparent;

      }

    }

  }

</style>

效果图如下：

​

问题分析

这是华为与联盟的底层实现差异导致的。

解决办法：

1.用stack组件父节点，然后再用依次div覆盖在上，在div中设置相关样式，从而达到最终效果。

代码如下：

<template>

  <div class="container">

    <stack class="item-container">

      <div class="arrow_a"></div>

      <div class="arrow_b"></div>

    </stack>

  </div>

</template> 

<style>

  .container {

    flex: 1;

    flex-direction: column;

  }

  .item-container {

    width: 500px;

    height: 500px;

  }

  .arrow_a {

    width: 80px;

    height: 80px;

    background-color: rgb(66, 66, 241);

    top: 250px;

    left: 250px;

    margin-top: -40px;

    margin-left: -40px;

    transform: rotate(45deg);

  }

  .arrow_b {

    width: 150px;

    height: 150px;

    background-color: #ffffff;

    top: 250px;

    left: 250px;

    margin-top: -150px;

    margin-left: -75px;

  }

</style>

效果图如下：

​

2.使用canvas组件画一个出来。

3.使用图片堆叠来实现。

​

欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh