Html 如何增加交点的角度？

我试图在HTML/CSS中创建一个信封图标，但我似乎无法正确处理这部分内容

正如你所看到的，这些角并没有完全与对角线对齐，我真的不知道如何打开角度多一点。这是我写的：

CSS

.enveloppe {    
     overflow: hidden;
     position: relative;
     width: 14px; height: 11px;
     border-radius: 3px;
     margin-right: 6px;
     background: white;
    display: inline-block;
 }
.enveloppe-plie{
    position: absolute;
    width: 14px;
    height: 5px;
    top: 3pt;
    content: "";
    display: inline-block;
    border-right: 1px solid #333333;
    border-top: 1px solid #333333;
    transform: rotate(135deg);
    vertical-align: top;
    margin-top: -10px;
    margin-left: -5px;
}

HTML

替换

左边距：-5px带
左边距：3倍而且它看起来更好一点
这将成为一个白色信封。使用此链接学习使用CSS制作三角形

CSS

HTML

可能您得到的形状取决于浏览器的缩放因子-使用svg而不是div和css可能会获得更好的结果。
变换：旋转（135度）、缩放（1.2度）或类似的东西可能会有所帮助。然而，它看起来可能不会很锋利。
<div class="enveloppe">
<div class="enveloppe-plie"></div>
</div>

.envelope {
    background-color: white;
    border-radius: 4px;
    height: 64px;
    width: 96px;
    overflow: hidden;
    position: relative;
}
.envelope-fold1, .envelope-fold2 {
    border-right: 48px solid transparent;
    border-left: 48px solid transparent;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}
.envelope-fold1 {
    border-top: 48px solid black;
}
.envelope-fold2 {
    border-top: 44px solid white;
}

<div class="envelope">
    <div class="envelope-fold1"></div>
    <div class="envelope-fold2"></div>
</div>