Îl faci destul de ușor.
Scurtă introducere: Este util un astfel de element atunci când faci o rubrică de testimoniale, păreri sau dacă faci o platformă de trimitere de mesaje. Ori vrei să îți personalizezi puțin secțiunea comentarii de pe blog 🙂
Pași:
- Faci divul care să conțină textul;
.speechbubble { position: relative; padding: 30px; border-radius: 20px; background-color: #f5f5f5; }
- Cutomizezi speech bubbleul! Practic aici îi vei da acea atingere artistică 🙂 care va crea elementul dorit;
.speechbubble :after { position: absolute; bottom: -20px; left: 60px; content: ""; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #f5f5f5; }
Te mai poți juca cu border-left și border-right pentru a-ți pozițona acel element.
Alt exemplu, mai mult artistic. Aici voi posta exact cum arată rezultatul final și apoi codul:
.exemplu-nou {
position: relative;
padding: 15px 30px;
margin: 0;
color: #000;
background: #f3961c;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
background: -moz-linear-gradient(#f9d835, #f3961c);
background: -o-linear-gradient(#f9d835, #f3961c);
background: linear-gradient(#f9d835, #f3961c);
-webkit-border-top-left-radius: 25px 50px;
-webkit-border-top-right-radius: 25px 50px;
-webkit-border-bottom-right-radius: 25px 50px;
-webkit-border-bottom-left-radius: 25px 50px;
-moz-border-radius: 25px / 50px;
border-radius: 25px / 50px; }
.exemplu-nou:before {
content: „”;
position: absolute;
bottom: -30px;
right: 80px;
border-width: 0 0 30px 50px;
border-style: solid;
border-color: transparent #f3961c;
display: block;
width: 0;
}
.exemplu-nou:after {
content: „”;
position: absolute;
bottom: -30px;
right: 110px;
border-width: 0 0 30px 20px;
border-style: solid;
border-color: transparent #fff;
display: block;
width: 0;
}
Ce mare și galben sunt!
.exemplu-nou { position: relative; padding: 15px 30px; margin: 0; color: #000; background: #f3961c; background: -webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c)); background: -moz-linear-gradient(#f9d835, #f3961c); background: -o-linear-gradient(#f9d835, #f3961c); background: linear-gradient(#f9d835, #f3961c); -webkit-border-top-left-radius: 25px 50px; -webkit-border-top-right-radius: 25px 50px; -webkit-border-bottom-right-radius: 25px 50px; -webkit-border-bottom-left-radius: 25px 50px; -moz-border-radius: 25px / 50px; border-radius: 25px / 50px; } .exemplu-nou:before { content: ""; position: absolute; bottom: -30px; right: 80px; border-width: 0 0 30px 50px; border-style: solid; border-color: transparent #f3961c; display: block; width: 0; } .exemplu-nou:after { content: ""; position: absolute; bottom: -30px; right: 110px; border-width: 0 0 30px 20px; border-style: solid; border-color: transparent #fff; display: block; width: 0; }
<blockquote class="exemplu-nou"> <p>Ce mare și galben sunt!</p> </blockquote>