1

我试图让文本位于 CSS 形状的顶部（或前面）。它适用于border-bottom，但不适用于border-top（这是我需要它的样子）。我假设因为border-top设置了属性，所以它将文本推到形状下方。

不太确定如何在不使用图像的情况下使其正常工作。我可以发誓我以前看过这个，但我不记得在哪里。

这是我的小提琴：http: //jsfiddle.net/ultraloveninja/W2SPd/

<h1>the trap</h1>

h1 {
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
4

4 回答 4

2

只需创建一个新的伪元素:after，然后使用边框样式设置伪元素的样式：)

优点？您不必仅仅为样式创建新元素，或者使用没有语义意义的不必要的嵌套/包装；它不是基于图像的解决方案。缺点 - 需要浏览器支持伪元素，因此可能无法在旧版本的 IE 上运行......但这不是你应该担心的事情。

h1 {
    width: 100px;
    padding: 0 50px; /* To account for the left and right borders in pseudo element to ensure it lines up */
}
h1:after {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    z-index: -1; /* Displays pseudo element behind text */
    width: 100px;
}

在这里看小提琴 - http://jsfiddle.net/teddyrised/W2SPd/11/

于 2013-03-01T23:40:18.277 回答
2

您需要 2 个元素和 2 个 CSS 样式。一个用于文本，一个用于背景：

<h1><div>the trap</div></h1>

CSS

h1 {
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
h1 div {
    position: relative;
    top: -100px;
}

http://jsfiddle.net/vPt7h/

于 2013-03-01T23:31:14.697 回答
2

您可以为文本插入span标签并获取：

h1 {
    border-top: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
    position:relative;
}
h1 span {
   position: absolute;
    top: -100px;
}

演示http://jsfiddle.net/W2SPd/10/

可行的？

于 2013-03-01T23:32:37.757 回答
0

这真的是一个糟糕的方式来做它。它仍然会占用比需要更多的空间，并且您正在寻找潜在的问题。是的，您可以使用其他人提供的示例，但如果是我，我会将形状制作为图像并通过 CSS 将其用作背景。

.myShape { background:url(/pathto/your/image.png); width:150px; height:100px; }
于 2013-03-01T23:34:57.297 回答