Un banner cu o mica zona stanga ce are pe fiecare latura un "obiect" ascutit si se doreste a avea un text centrat pe ambele axe. Fiind vorba de un banner, nu trebuie sa lipseasca si textul centrat.
<div class="shadows"> <div class="shadows-layer"> <div class="shadows-layer"> <div class="shadows-layer"> <div class="shadows-layer"> <div class="shadows-layer"> <div class="shadows-layer"> <div class="shadows-layer"> <div class="shadows-layer"> <div class="shadows-layer"> <div class="shadows-layer"> <div class="shadows-layer-last"> <div class="shadows-layer-last-inside"> <div class="website-shadows-layer-last-inside-square-area"> <div class="website-shadows-layer-last-inside-square"> <span>Text</span> </div> </div> <div class="shadows-layer-last-inside-txt"> <span>Text text text</span> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
.shadows{
width: 100%;
min-width: 100px;
max-width: 1000px;
height: 200px;
margin: auto;
}
.shadows-layer,
.shadows-layer-last,
.shadows-layer-last-inside,
.website-shadows-layer-last-inside-square-area,
.website-shadows-layer-last-inside-square,
.shadows-layer-last-inside-txt{
display: flex;
justify-content: center;
align-items: center;
}
.website-shadows-layer-last-inside-square-area,
.website-shadows-layer-last-inside-square{
position: relative;
}
.website-shadows-layer-last-inside-square-area:before,
.website-shadows-layer-last-inside-square-area:after,
.website-shadows-layer-last-inside-square:before,
.website-shadows-layer-last-inside-square:after{
content: "";
position: absolute;
}
.shadows-layer{
width: calc(100% - 2px);
height: calc(100% - 2px);
padding: 1px;
background: rgba(0,0,0,0.01);
animation: shadows-layer 1s infinite alternate;
}
@keyframes shadows-layer{
to{
background: rgba(0,0,0,0.05);
}
}
.shadows-layer-last,
.shadows-layer-last-inside{
width: calc(100% - 20px);
height: calc(100% - 20px);
padding: 10px;
}
.shadows-layer-last{
background: #9f1c1e;
}
.shadows-layer-last-inside{
background: #dc1f26;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.website-shadows-layer-last-inside-square-area{
width: 200px;
height: 100%;
}
.website-shadows-layer-last-inside-square-area:before{
border-top: 130px solid #9f1c1e;
border-right: 0 solid transparent;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
top: 0;
left: 0;
}
.website-shadows-layer-last-inside-square-area:after{
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-left: 0 solid transparent;
border-bottom: 130px solid #9f1c1e;
bottom: 0;
right: 0;
}
.website-shadows-layer-last-inside-square{
width: calc(100% - 30px);
height: calc(100% - 30px);
background: #9f1c1e;
color: #dc1f26;
}
.website-shadows-layer-last-inside-square:before{
border-right: 170px solid #9f1c1e;
border-left: 0 solid transparent;
border-bottom: 0px solid transparent;
border-top: 5px solid transparent;
top: -10px;
right: 0;
}
.website-shadows-layer-last-inside-square:after{
border-right: 0 solid transparent;
border-left: 170px solid #9f1c1e;
border-bottom: 5px solid transparent;
border-top: 0 solid transparent;
left: 0;
bottom: -10px;
}
.shadows-layer-last-inside-txt{
width: calc(100% - 200px);
}
.shadows-layer-last-inside-txt span{
font-size: 20px;
color: #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}