CSS形状前面的文本

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

不太确定如何使它无需使用图像就能正常工作。我可以发誓我以前见过这件事，但我不记得在哪里。

这里是我的小提琴：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; 
}

来源

2013-03-01 ultraloveninja

需要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-01 23:31:14

我试图把该进的跨度标签，但我没有使用负顶部值为雀巢。但是你的和上面的其他作品。谢谢！ – ultraloveninja 2013-03-01 23:36:35

您可以将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-01 23:32:37 andrewk

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

.myShape { background:url(/pathto/your/image.png); width:150px; height:100px; }

来源

2013-03-01 23:34:57

甚至是精灵边界。虽然它不如背景那么可靠，但它会给你更多的灵活性。 – 2013-03-01 23:36:19

*“不太确定如何使它无需使用图像就能正常工作。”* - OP – SeinopSys 2013-03-01 23:36:51

我可以想象为什么人们不想使用图像的几个原因。他们需要一个单独的请求，更难以动态改变颜色等。 – 2013-03-01 23:36:58

只需创建一个新的伪元素: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-01 23:40:18 Terry

甜，谢谢！是的，我试图让它与之合作：之后，但我一定错过了一些东西。谢谢！ – ultraloveninja 2013-03-01 23:54:34

CSS形状前面的文本

回答

相关问题