现象描述
在快应用中使用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
