WPF产品卡片实现：矩形倾斜效果不符预期求助

你的核心问题是用了过于复杂的嵌套和变换组合，导致倾斜色块的位置、角度不符合预期。可以简化布局结构，通过精准的变换参数实现预期效果：

修正后的代码：

<Border Width="198" Height="268"
        Background="#FFCCCCCC"
        BorderThickness="1"
        CornerRadius="12">
    <Grid>
        <!-- 倾斜的橙色色块 -->
        <Border Width="140" Height="220"
                Background="#FFF7542E"
                CornerRadius="0,12,12,12"
                HorizontalAlignment="Right"
                VerticalAlignment="Bottom">
            <Border.RenderTransform>
                <TransformGroup>
                    <!-- 水平倾斜实现右侧向上的效果 -->
                    <SkewTransform AngleX="15" />
                    <!-- 微调位置让色块贴合卡片右下角 -->
                    <TranslateTransform X="20" Y="10" />
                </TransformGroup>
            </Border.RenderTransform>
        </Border>
        <!-- 此处可添加卡片其他内容：图片、文字等 -->
    </Grid>
</Border>

关键调整点：

• 移除多余的Grid嵌套、ScaleTransform反转和OpacityMask，大幅简化结构
• 直接对橙色Border应用SkewTransform实现倾斜效果，AngleX="15"可根据预期效果微调角度
• 通过TranslateTransform调整色块位置，确保贴合卡片右下角圆角区域
• 保持色块CornerRadius与预期一致：右上、右下、左下圆角，左上直角

如需更精准匹配预期效果，可微调以下参数：

• SkewTransform的AngleX值：数值越大，倾斜程度越明显
• TranslateTransform的X/Y值：调整色块在卡片内的偏移位置
• 色块的Width/Height：适配卡片整体尺寸

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