After customizing a Wordpress tabs widget to match the design in the attached image, I encountered one issue.
The challenge lies in keeping the ribbon edges atop the website layout. The progress so far can be viewed in this demo.
To display the images, I included the following code:
#wp-tabs-1 .ui-tabs .ui-tabs-nav:before{
content: url(../images/l-corner.png);
width: 47px;
height: 43px;
position: absolute;
left: -5em;
z-index: 999;
}
#wp-tabs-1 .ui-tabs-nav:after{
content: url(../images/r-corner.png);
width: 47px;
height: 43px;
position: absolute;
right: -5em;
z-index: 999;
}
Despite trying various combinations of positioning and z-index values, I have been unable to ensure that the ribbon edges stay on top as desired.