Question

我正在尝试在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

<div class="enveloppe">
<div class="enveloppe-plie"></div>
</div>

Answer 1

将margin-left: -5px;替换为margin-left: 3px;，看起来好一点

Answer 2

这将制作一个白色信封。使用此链接学习使用CSS https://css-tricks.com/snippets/css/css-triangle/

制作三角形

CSS

.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;
}

HTML

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

如何增加交叉口的角度？

2 个答案: