By Stephen Walker
Share
Another example of using a skewed background, this time targeting the pagination preview. Additionally, this limits the width of the preview and allows the text to wrap. Lastly, a clip-path is used to give the featured image a skewed appearance.
.fusion-pagination-preview-wrapper{
position:relative;
isolation: isolate;
padding:16px;
}
.fusion-pagination-preview-wrapper::after{
position:absolute!important;
content:"";
z-index: -1!important;
inset: 0!important;
transform:skewX(-5deg)!important;
background-color:var(--awb-color5)!important;
}
.fusion-body .fusion-pagination-tb:not(.layout-sticky).layout-preview .fusion-pagination-preview-wrapper .fusion-item-title {
padding: .5em .75em;
white-space:unset!important;
overflow: hidden;
text-overflow:unset;
max-width: 300px;
display: block;
text-align: left;
color:var(--awb-color2)!important;
}
.fusion-body .fusion-pagination-tb:not(.layout-sticky).layout-preview .fusion-pagination-preview-wrapper .fusion-item-media img{
max-width:100%!important;
clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
}
Originally published on Feb. 16, 2023