HTMLとCSSを使用するメールアイコン

Question

CSSでメールアイコンを作成しようとしています。これは、UIまたはフロントエンド開発者としてコーディングする正しい方法ですか？

Check out my Codepen here.

.container { 
 
    border-left: 10px solid #80BD9E; 
 
    border-right: 10px solid #80BD9E; 
 
    background: #F98886; 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 10% auto; 
 
    border-radius: 6px; 
 
} 
 
.arrow-down { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 250px solid transparent; 
 
    border-right: 254px solid transparent; 
 
    border-top: 250px solid #80BD9E; 
 
} 
 
.arrow-down1 { 
 
    top:22%; 
 
    left:25.5%; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 250px solid transparent; 
 
    border-right: 254px solid transparent; 
 
    position: absolute; 
 
    border-top: 250px solid #f98886; 
 
    border-radius:6px; 
 
} 
 
.topLayer { 
 
    background: #fff; 
 
    position: absolute; 
 
    width: 505px; 
 
    height: 100px; 
 
    margin-left: 24.5%; 
 
    margin-top: -9.9%; 
 
    z-index: 1; 
 
}

<div class="topLayer"> 
 
</div> 
 
<div class="container"> 
 
    <div class="arrow-down"> 
 
    <div class="arrow-down1"> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

第三のボックスを削除します。その後、これは正常に見えます。

.container { 
 
    border-left: 10px solid #80BD9E; 
 
    border-right: 10px solid #80BD9E; 
 
    background: #F98886; 
 
    height: 500px; 
 
    width: 500px; 
 
    margin: 10% auto; 
 
    border-radius: 6px; 
 
} 
 
.arrow-down { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 250px solid transparent; 
 
    border-right: 254px solid transparent; 
 
    border-top: 250px solid #80BD9E; 
 
} 
 
.topLayer { 
 
    background: #fff; 
 
    position: absolute; 
 
    width: 505px; 
 
    height: 100px; 
 
    margin-left: 24.5%; 
 
    margin-top: -9.9%; 
 
    z-index: 1; 
 
}

<div class="topLayer"> 
 
    <div class="container"> 
 
    <div class="arrow-down"> 
 

 

 
    </div> 
 
    </div> 
 
</div>

しかし、それは素晴らしいフォントを使用するように簡単です：クール

Answer 2

http://fontawesome.io/はあなたがHTML & CSSで創造的になろうとしていることを確認します。私の前に提案されているように、それはprobebly best /最も簡単なfontAwesome、Material IconsまたはBootstrap Iconsを使うだけです。

しかし、自分でアイコンを作成する場合は、position: relativeの「container-div」とアイコンposition: absoluteのすべての要素を使用してみてください。今すぐメールは正しい方法でレンダリングされません：