それで、添付した画像のように見えるようにワードプレスのタブウィジェットを変更しましたが、問題が1つだけあります。
リボンの端を Web サイトのレイアウトの上に配置できません。ここでこれまでに行ったことのデモがあります。
そこで、画像を表示するために次のコードを追加しました。
#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;
}
リボンの端が上にくるように、できる限りすべての配置の組み合わせを z-index で試しましたが、何もうまくいかないようです。