Question

我正在wordpress中创建自定义主题。我找到了一个代码来获取侧边栏上项目标题的功能区效果。然而，条带并没有完全流过侧边栏的边缘，而是它们位于侧边栏的中间，当我向右浮动标题时，部分色带被隐藏起来。我一直在使用谷歌浏览器“检查元素”方面，但似乎不能让它工作。我该怎么办？网站链接：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;
}

这里是侧边栏sytling

#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/

他从我所见过的大部分边缘案例中解决了问题。我在制作中使用它并没有太大的问题。

功能区溢出效应问题

1 个答案: