如何設計電子郵件模板邊框，如下圖所示？

-1

Email Template Borders Design如何設計電子郵件模板邊框，如下圖所示？

嘿堆棧社區，我的一個朋友問我設計的電子郵件模板他，但也有花哨的裝飾邊框，這一點我想不通，怎麼辦。任何人都可以幫我請代碼，因爲我是HTML CSS中的新手。由於我是堆棧溢出新手，他們沒有顯示圖片。所以下面有一個鏈接以下 Borders Sample

來源

2017-01-19 Farman Orakzai

嘿，歡迎來到SO。

爲了讓您在這裏得到答案，您需要分享您嘗試過的內容以及一些複製您的問題的相關代碼（HTML CSS等）。這不是一個代碼製作網站。我們只是調試您現有的代碼或幫助您更改代碼，以便獲得理想的結果。

但是..這是一個簡單的問題，所以我給你一個答案。檢查片斷低於或jsfiddle

在我的回答，我用僞元素:before和:after。如果您對代碼有任何疑問，請在下面評論。

也讓我知道這是否適合你。由於

div { 
 
    border:1px solid black; 
 
    height:calc(100vh - 10px); 
 
    width:calc(100vw - 10px); 
 
    margin:0 auto; 
 
    position:relative; 
 
} 
 
div:before,div:after { 
 
    position:absolute; 
 
    width:30%; 
 
    height:30%; 
 
    content:""; 
 
} 
 
div:before { 
 
    top:0; 
 
    left:0; 
 
    border-left:10px solid green; 
 
    border-top:10px solid green; 
 
    transform:translate(-5px,-5px) 
 
} 
 
div:after { 
 
    bottom:0; 
 
    right:0; 
 
    border-right:10px solid green; 
 
    border-bottom:10px solid green; 
 
    transform:translate(5px,5px) 
 
}

<div></div>

來源

2017-01-19 14:16:40

那是偉大的.. 完美的作品，而不是完全的寬度。我該怎麼做，以便它符合div大小。 –

你是什麼意思全寬？和div大小？請詳細解釋。也。如果這個答案適合你。請評估爲接受。謝謝 –

先生，請看看圖像。它位於左上角區域，是否可以使其全寬爲100％，因此它不會看起來很小，並顯示在整個屏幕上。這裏是截圖http://prntscr.com/dxntba –

如何設計電子郵件模板邊框，如下圖所示？

回答

相關問題