[ Expediente ] Triangulo de estrellas

<link href="https://fonts.googleapis.com/css?family=Almarai:400,700,800|Playfair+Display&display=swap" rel="stylesheet"> <div class="relative-triangu"> <div class="code-triangu" style="background-image:url(https://66.media.tumblr.com/2f3f612e7f08d8e3a75ffa72bad42102/tumblr_pvuw6997AK1r3thx5o2_r1_500.png);"> <div class="abso-triangu"></div> <div class="datos-basicos-tri">Datos básicos</div> </div> <div class="gray-right"> <div class="amor-fugaz"><span style="color: #D58C25;">Nombre completo:</span> Aquí va un nombre completo, aunque sea muy largo, o aunque sea muy corto. <span style="color: #D58C25;">Nacionalidad:</span> Provengo de un lugar muy lejano, mágico y congelado. <span style="color: #D58C25;">Edad:</span> Ya estoy muy viejo. <span style="color: #D58C25;">Raza:</span> Provengo del dolor más profundo y la rabia más intensa, mezclados en un apretado amasijo de impotencia, hasta que un día ese amasijo explotó y nací, como la única lágrima de ese ser gélido.</div> </div> <div class="left-transparency"> <!--Aquí empieza la HISTORIA--> <div class="transpa-title"> <div class="titi-tri"></div> <div class="left-titulo">Historia</div> <div class="left-subtitulo">Todo comenzó cuando...</div> </div> <div class="dimealgo-porfavor"> Lorem ipsum dolor sit amet consectetur adipiscing, elit rhoncus pretium ullamcorper lacus molestie auctor, platea ultrices lacinia cubilia pulvinar. Montes egestas nec potenti arcu nibh gravida auctor, eleifend duis faucibus lectus himenaeos quis, euismod conubia nulla mollis quisque libero. Orci ultrices primis accumsan penatibus platea nisl faucibus nullam, praesent nam condimentum curae bibendum diam ligula sed class, iaculis imperdiet a congue erat molestie nulla. <br><br>Tellus eget senectus pharetra consequat ullamcorper id nullam, tincidunt porta rutrum duis morbi primis phasellus, hac venenatis platea porttitor quam eu. </div> <!--Aquí termina la HISTORIA--> <!--Aquí empieza la PERSONALIDAD--> <div class="transpa-title"> <div class="titi-tri"></div> <div class="left-titulo">Personalidad</div> <div class="left-subtitulo">Todo comenzó cuando...</div> </div> <div class="dimealgo-porfavor"> Lorem ipsum dolor sit amet consectetur adipiscing, elit rhoncus pretium ullamcorper lacus molestie auctor, platea ultrices lacinia cubilia pulvinar. Montes egestas nec potenti arcu nibh gravida auctor, eleifend duis faucibus lectus himenaeos quis, euismod conubia nulla mollis quisque libero. </div> <!--Aquí termina la PERSONALIDAD--> <!--Aquí empieza la GUSTOS--> <div class="transpa-title"> <div class="titi-tri"></div> <div class="left-titulo">Gustos y disgustos</div> <div class="left-subtitulo">Todo comenzó cuando...</div> </div> <div class="dimealgo-porfavor"> Lorem ipsum dolor sit amet consectetur adipiscing, elit rhoncus pretium ullamcorper lacus molestie auctor, platea ultrices lacinia cubilia pulvinar. Montes egestas nec potenti arcu nibh gravida auctor, eleifend duis faucibus lectus himenaeos quis, euismod conubia nulla mollis quisque libero. </div> <!--Aquí termina la GUSTOS--> <!--Aquí empieza la EXTRAS--> <div class="transpa-title"> <div class="titi-tri"></div> <div class="left-titulo">Extras</div> <div class="left-subtitulo">Todo comenzó cuando...</div> </div> <div class="dimealgo-porfavor"> Lorem ipsum dolor sit amet consectetur adipiscing, elit rhoncus pretium ullamcorper lacus molestie auctor, platea ultrices lacinia cubilia pulvinar. Montes egestas nec potenti arcu nibh gravida auctor, eleifend duis faucibus lectus himenaeos quis, euismod conubia nulla mollis quisque libero. </div> <!--Aquí termina la EXTRAS--> </div> </div><center><h5 id="cyala-sign"><a href="https://magicalcore.tumblr.com/">C y a l a n a</a></h5></center>

<style>.relative-triangu {background: #eee; height: 700px; width: 500px; margin: auto; position: relative; -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 65% 85%, 50% 100%, 35% 85%, 0% 85%); clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 20% 90%, 10% 100%, 0% 100%); border-bottom: 15px solid #D58C25;} .code-triangu {-webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 65% 85%, 50% 100%, 35% 85%, 0% 85%); clip-path: polygon(0 0, 100% 0, 100% 73%, 95% 73%, 85% 100%, 75% 73%, 0% 73%); height: 300px; width: 500px; background: red; background-size: cover; z-index: 1; position: absolute; top: 0;} .abso-triangu {background: #D58C25; height: 100px; width: 100px; position: absolute;right: 25px; top: 170px;clip-path: polygon(0 20%, 50% 100%, 50% 70%, 30% 35%, 70% 35%, 50% 70%, 50% 70%, 50% 70%, 50% 100%, 100% 20%);} .gray-right {background: #ddd; height:485px; width: 150px; position: absolute; right: 0; bottom: 0;} .amor-fugaz {margin: 100px 15px 15px 15px; font-family: 'Almarai', sans-serif; font-size: 10px; text-align: left; line-height: 20px; height: 370px; overflow: auto; padding-right: 5px; color: #555;} .datos-basicos-tri {color: #fff; font-family: 'Almarai', sans-serif; font-size: 10px; text-transform: uppercase; position: absolute; letter-spacing: 1px; font-weight: 700; right: 25px; top: 165px; text-shadow: 0px 0px 10px #000;} .left-transparency {height: 376px; width: 325px; position: absolute; bottom: 80px; left: 0px; float: left; overflow:auto; padding-right: 15px;} .transpa-title {position: relative; height: 50px; margin-left: 25px;} .left-titulo {color: #2A2B6f; font-size: 20px; font-family: 'Almarai', sans-serif; letter-spacing: 1px; position: absolute; left: 5px; top: 23px; line-height: 0; font-weight: 800; text-transform: uppercase; z-index:1;} .titi-tri {height: 25px; width: 25px; background: #D58C25;clip-path: polygon(0 0, 0% 100%, 75% 50%); position: absolute; left:-25px; top: 25px;} .left-subtitulo {color: #000; font-size: 10px; font-family:Playfair Display,serif; position: absolute; left: 0; bottom: 0; background: #ddd; display: block; width: 290px; PADDING: 5px;} .dimealgo-porfavor {font-family: Playfair Display; font-size: 11px; padding: 10px 0 10px 20px; border-left: 1px solid #ddd; color: #222; margin-left: 25px; line-height: 16px;} #cyala-sign {font-size: 6px; text-transform: uppercase; letter-spacing: 2px; margin:0; font-family: arial; margin-top: 10px;} #cyala-sign a { text-decoration: none!important;} .left-transparency::-webkit-scrollbar { width: 4px; } .left-transparency::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .left-transparency::-webkit-scrollbar-thumb { background: #D58C25;} .amor-fugaz::-webkit-scrollbar { width: 4px; } .amor-fugaz::-webkit-scrollbar-track { background: rgba(0,0,0,0.0); } .amor-fugaz::-webkit-scrollbar-thumb { background: #D58C25;}</style>