WordPress Popular Posts CSS カスタマイズ。ランキングの青い四角背景を三角にしたい！

###前提・実現したいこと
当ブログのWordPress Popular Postsというプラグインで作成した人気記事のカスタマイズについての質問です。
http://mi-so-ji.com/

右にのってるランキングの青背景の部分を三角にしたい。
具体例を上げると、
ttps://digipress.digi-state.com/extensions/popular-posts/

のようにしたい。
###発生している問題・エラーメッセージ
四角までは自力でたどり着きましたが、三角にする方法がどうしてもわかりません。何かヒントをいただけたら幸いです。
追加したコードは以下の感じです。
###ソースコード
.wpp-thumbnail {
position: relative!important;
float: left!important;
overflow: hidden!important;
width: 98px!important;
height: 65px!important;
margin: 0 10px 0 0!important;
z-index: 1!important;
background-color: rgba(0,0,0,0.1)!important;
}

.wpp-post-title {
display: inline;
line-height: 15px;
padding: 0;
margin-right: 6px;
font-size: 11px;
border: none !important;
}
.wpp-list {
counter-reset:wpp-ranking;
}
.wpp-list li {
border-bottom: 1px dotted rgba(32, 32,32, 0.3);
}
.wpp-list li:before {
content: counter(wpp-ranking, decimal);
counter-increment: wpp-ranking;
position: absolute;
/* top: 0px; */
text-align: center;
left: 0px;
z-index: 2;
color: #ffffff;
width: 30px;
height: 25px;
background-color: rgba(49,201,224,0.84);
font-size: 15px;
}