如何在Ionic 3的ion-item组件中添加左上角带颜色的弧形三角形

问题原因 #

• 你的弧形三角形使用position: relative+浮动布局，图片样式调整会触发文档流重排，很容易把三角形元素挤到父级ion-item可视范围外，而ion-item默认开启overflow: hidden，超出范围的元素会被直接裁剪隐藏
• 三角形元素本身初始宽高设置过小，复杂的transform偏移后更容易超出父级边界

修改方案 #

1. 父级容器样式调整

给.item新增两个属性，开启相对定位作为三角形的定位锚点，同时关闭溢出裁剪：

.item{
    /* 保留你原有所有样式，新增以下两行 */
    position: relative;
    overflow: visible !important;
    /* 原有样式不变 */
}

2. 三角形样式调整

把三角形改为绝对定位，直接固定在左上角，脱离文档流，不受图片、文字的排布影响，同时调整尺寸避免过大溢出：

#triangle-topleft {
    /* 删掉原来的float、position: relative配置，替换为以下内容 */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* 确保三角形在最上层不被图片盖住 */
    /* 调整边框尺寸适配你的item高度，不需要原来的100px这么大 */
    border-top: 40px solid color($colors,primary);
    border-right: 40px solid transparent;
    /* 原有transform、border-radius属性可以保留，也可以根据新的尺寸微调transform参数对齐位置 */
    border-radius: 20% 20% 20% 53%;
    transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%);
}

调整之后不管你怎么修改图片的尺寸、边距，三角形都会固定在左上角不会消失，你还可以调整border-top和border-right的数值修改三角形的大小。

内容的提问来源于stack exchange，提问作者user7500984