使用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>

但它更容易使用字體真棒：http://fontawesome.io/

Answer 2

冷靜地看到，你想成爲創意與HTML & CSS。就像在我之前建議的那樣，使用fontAwesome，Material Icons或Bootstrap Icons是最好/最簡單的方法。

但是，如果您自己製作圖標，請嘗試使用帶有position: relative和圖標position: absolute的所有元素的「容器div」。此時此電子郵件無法呈現正確的方式：