Ribbon溢出效果问题

Question

我正在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;

}

Answer 1

我会从Chris Coyier的css Tricks的带状CSS开始：http://css-tricks.com/snippets/css/ribbon/

他解决了我所见过的大多数边缘案例。我在一次生产中使用了它，没有太大的问题。