Siwon Post de Rol

<br/><div class="siwon">
<div class="s1">
<i class="fas fa-guitar"></i>
<span>título del post</span>
</div>
<div class="s2" style="background:url(http://placehold.it/400x250);"></div>
<div class="s3">
<div class="s4" style="background:url(http://placehold.it/100/eee)"></div>
<div class="s5">Post</div>
<div class="s6">
<span>Dato</span>
<span>Tantos como quieras</span>
<span>En serio</span>
</div>
</div>
</div>
<a href="https://necromancercoding.tumblr.com/" class="ncredit">NC</a>

<style>.siwon{ --background:#fafafa; --border-1: #eee; --border-2: #ddd; --accent-1: #86b3c9; --accent-2: #6d96ab; --accent-txt: #fff; --txt:#444; }</style><link href="https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i,900&display=swap" rel="stylesheet"/><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"/><style>.siwon { background:var(--background); width:400px; padding:0 25px 25px; border:2px solid var(--border-1); outline:1px solid var(--border-2); margin:15px auto; } .s1{ background:var(--accent-1); margin: 0 -25px 25px; color:var(--accent-txt); text-shadow:1px 1px 0px var(--accent-2); font:10px raleway; font-weight:900; text-transform:uppercase; height:40px; display:flex; justify-content:flex-start; align-items:center; padding: 0 10px; } .s1 i{ background:var(--accent-2); -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); padding:10px; margin-right:10px; } .s2{ width:400px; height:250px; } .s3{ background:var(--background); width:340px; margin:-20px 30px 0; position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; border-top:6px solid var(--accent-1); } .s4 { width:100px; height:100px; -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); position:absolute; top:-53px; } .s5{ margin-top:64px; margin-bottom:25px; text-align:justify; font:10px verdana; text-align-last:justify; width:300px; color:var(--txt); } .s5 i, .s5 em, .s5 strong, .s5 b{ font-family: raleway; color:var(--accent-2); } .s6{ background:var(--accent-1); color:var(--accent-txt); display:flex; justify-content:center; align-items:center; font:10px raleway; font-weight:700; text-transform:uppercase; text-shadow:1px 1px 0px var(--accent-2); width:340px; height:30px; } .s6 span:after{ content:"|"; color:var(--accent-2); margin:0 5px; text-shadow:0 0 0 transparent; } .s6 span:last-of-type:after{ content:""; } .siwon br{ display:none; } .siwon .s5 br{ display:block; } .ncredit { width: 400px; text-align: center; margin: 0 auto; display: block; font-size: 10px; text-decoration: none; font: 8px verdana; color:#aaa; } .siwon + br + .ncredit { margin-top: -15px; } .ncredit:before { content: "©"; }</style>