XenForo Duyuru Şekillendirici

<div class="block--annonce">
<div class="banner">
<div class="banner--text">
<i class="fa fa-info-circle" aria-hidden="true"></i> Annonce</div>
</div>
<div class="content">
<h3>Societyfrenchmodding</h3><p>Est une communauté francophone fondée sur le principe de partage et d'entraides.</p>
<p>Vous avez des questions ? n'hésitez pas a les poser, nous somme là pour vous  répondre.</p>
<p>L'inscription est gratuite, profitez en et rejoignez-nous !
</p>
</div>
</div>

.block--annonce {
font-family: "Montserrat", sans-serif;
font-size: 0.9em;
line-height: 1.4em;
text-align: justify;
font-weight: 200;
background-color: white;
}
.block--annonce .banner {
position: relative;
overflow: hidden;
height: 10vmax;
text-transform: uppercase;
font-size: 1.2em;
font-weight: 300;
color: #ffffff;
}
.block--annonce .banner:before,
.block--annonce .banner:after {
content: "";
position: absolute;
width: 110%;
height: 10vmax;
}
.block--annonce .banner:before {
left: -1%;
background: rgba(0, 114, 255, 0.5);
background: linear-gradient(to right, rgba(0, 114, 255, 0.5) 15%, rgba(0, 91, 204, 0.5) 100%);
z-index: 10;
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.block--annonce .banner:after {
right: -1%;
background: #0052b7;
background: linear-gradient(to right, #0052b7 15%, #002451 100%);
-webkit-transform: rotate(1deg);
transform: rotate(1deg);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.block--annonce .banner .banner--text {
position: absolute;
top: 30%;
left: 5vmax;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 50;
text-align: left;
font-size: 1.5vmax;
line-height: 2.85714286vmax;
}
.block--annonce .content {
padding: 2vmax;
}
.block--annonce .fa {
font-size: 1.2em;
}