wordpressでカスタムテーマを作成しています。サイドバーのアイテムのタイトルの周りにリボン効果を得るコードを見つけました。ただし、リボンはサイドバーの端に完全に流れているわけではなく、サイドバーの中央にあり、タイトルを右にフロートさせると、リボンの一部が非表示になります。私はGoogle Chromeの「要素の検査」の側面で遊んでいますが、うまく機能していないようです。私は何をすべきか？ここのサイトのリンク: gamedaymeetup.com
h1.widget-title {
text-align: center;
position: relative;
color: #fff;
margin: 0 -30px 30px -30px;
padding: 10px 0;
text-shadow: 0 1px rgba(0,0,0,.8);
background: #5c5c5c;
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
h1.widget-title:before, h1:after
{
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
}
h1.widget-title:after
{
border-width: 0 0 10px 10px;
border-left-color: #222;
right: 0;
}
これがサイドバーのスタイルです
#sidebar {
text-align: left;
display: block;
padding: 9px;
float: right;
width: 246px;
height: 100%;
font-family: "Gotham SSm A", "Gotham SSm B", Arial, sans-serif;
font-size: 13px;
line-height: 16px;
letter-spacing: .2px;
background-color: #FFF;
background-position: bottom;
color: #000;
border-left-width: 1px;
border-left-style: inset;
border-left-color: #C3C3C3;
}