1

好的，所以我问了一个问题并获得了有关使用纯 CSS 创建图像的帮助，位于此处： Ribbon and stars - How to get this done without a image file?

但这种方法，border-color在图像的两侧放一个以制作色带角效果。但现在我需要做如下图所示的事情：

带背景的丝带一半高度

因此，不确定如何使用此处提供的功能区方法（如果可能的话）：http: //jsfiddle.net/a498M/1/

我相信这可以在带有 HTML 的 CSS 中完成，只需要一些关于如何实现它的帮助。这是我到目前为止的代码：

CSS：

div.name_container {
    text-align: center;
}
h1 {
    font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
    font-size: 2.2em;
    margin: 0 auto;
    background:#BF2C24;
    display: inline-block;
    padding: 0 1.5em;
    color: #f2efe9;
    position: relative;
    height: 1.4em;
    line-height: 1.4em;
    text-transform: uppercase;
    z-index: 10;
}
h1:before { /* this will create white triangle on the left side */
    position: absolute;
    content: "";
    top: 0px;
    left: 0px;
    height: 0px;
    width: 0px;
    border-top: .7em solid transparent;
    border-left: .7em solid #f2efe9; 
    border-bottom: .7em solid transparent;
    z-index: 8;
}
h1:after { /* this will create white triangle on the right side */
    position: absolute;
    content: "";
    top: 0px;
    left: auto;
    right: 0px;
    height: 0px;
    width: 0px;
    border-top: .7em solid transparent;
    border-right: .7em solid #f2efe9; 
    border-bottom: .7em solid transparent; 
    z-index: 8;
}
h1 span.sidestar-left, h1 span.sidestar-right {
    position: absolute;
    font-size: .6em;
    top: 0;

}
h1 span.sidestar-left {
    left: 1.8em;
}
h1 span.sidestar-right {
    right: 1.8em;
}

HTML：

<div class="name_container">
    <h1><span class="sidestar-left">&#9733;</span>&nbsp;&nbsp;Kristine&nbsp;Coady&nbsp;&nbsp;<span class="sidestar-right">&#9733;</span></h1>
</div>

所以，我需要以div某种方式在此功能区下方添加一个元素，但是如果它看起来不这样，我该怎么做呢？

h1:after 和 h1:before 边界问题

因此，h1:afterandh1:before导致了这个问题。是否有可能在没有导致颜色问题的边界的情况下获得这种色带效果？我需要它看起来像第一个图像，它是透明的并且它下面的图像显示出来，或者我可以给边框的上半部分 1 颜色和边框的下半部分可能是不同的颜色？但是如何？

4

1 回答 1

2 
border-top: 20px solid #A52927;
border-right: 20px solid transparent; 
border-bottom: 20px solid #A52927;
margin-right:-20px;

那是为了骑行。这是一个相当简单的修复。希望这可以帮助！

于 2013-08-20T21:03:09.433 回答