HTML/CSS实现新西兰红峰旗：红色等腰三角底部定位及尺寸问题

我已完成旗帜左右两侧黑色和蓝色直角三角形的HTML/CSS编写，但无法将中间的红色等腰三角形固定在旗帜底部——设置position: relative时还会出现变形。需要添加一个与中间空白区域角度一致、尺寸更小的红色等腰三角形，要求其底边固定在旗帜底部。

原代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NZ REDPEAK FLAG</title>
<style>
    .flag-base {
        height: 400px;
        width: 600px;
        position: relative;
    }

    .blue-part {
        height: 0px;
        width: 0px;
        position: absolute;
        left: 300px;
        border-right: 300px solid blue;
        border-bottom: 400px solid transparent;
    }

    .black-part { 
        height: 0px;
        width: 0px;
        position: absolute;
        border-left: 300px solid black;
        border-bottom: 400px solid transparent;
    }

    .red-part {
        height: 0;
        width: 0;
        border-right: 250px solid transparent;
        border-left: 250px solid transparent;
        border-bottom: 300px solid red;
        margin-left: auto;
        margin-right: auto;
    }
 </style>
 </head>
 <body>
 <div class="flag-base">
    <div class="blue-part"></div>
    <div class="black-part"></div>
    <div class="red-part"></div>
 </div>
 </body>
 </html>

修改后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NZ REDPEAK FLAG</title>
<style>
    .flag-base {
        height: 400px;
        width: 600px;
        position: relative;
        background-color: #fff;
    }

    .blue-part {
        height: 0;
        width: 0;
        position: absolute;
        left: 300px;
        border-right: 300px solid blue;
        border-bottom: 400px solid transparent;
    }

    .black-part { 
        height: 0;
        width: 0;
        position: absolute;
        border-left: 300px solid black;
        border-bottom: 400px solid transparent;
    }

    .red-part {
        height: 0;
        width: 0;
        border-left: 150px solid transparent;
        border-right: 150px solid transparent;
        border-top: 200px solid red;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
 </style>
 </head>
 <body>
 <div class="flag-base">
    <div class="blue-part"></div>
    <div class="black-part"></div>
    <div class="red-part"></div>
 </div>
 </body>
 </html>

修改说明 #

• 给.red-part设置绝对定位，通过bottom: 0固定在旗帜底部，配合left: 50%和transform: translateX(-50%)实现水平居中，避免margin居中的定位偏差
• 调整边框属性：将原border-bottom改为border-top，让三角形底边朝下；同时修改左右透明边框宽度为150px、顶部红色边框为200px，使其角度与左右黑蓝三角形成的空白区域完全匹配
• 给.flag-base添加白色背景色，确保跨环境显示效果一致

目标效果：旗帜底部居中显示红色等腰三角形，角度与两侧黑蓝三角的空白区域对齐，底边完全贴合旗帜底部。

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