​現象描述

在快應用中使用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