如何在CSS自定義形狀上放置文本？

Question

http://jsfiddle.net/77af3/

我使用CSS3：在創建自定義形狀之後：在三角形頂部的一個矩形。 我需要的文字是在矩形 的內部，並且應該位於三角形的頂部。 但是，字母的下半部分被三角形覆蓋了 。 我想知道是否可以使用CSS將文字 置於兩個圖形之上。

.position { 
border-style: 1px solid red; 
z-index:1; 
color:white; 
font-size:20px; 
text-align:center; 
background:red; 
height: 16px; 
width: 32px; 
position: relative; 
margin: 0 auto; 
padding-top:2px; 
} 

.position:after { 
content: ""; 
z-index:0; 
position: absolute; 
top: 18px; 
left: 0px; 
width: 0; 
height: 0; 
border-left: 16px solid transparent; 
border-right: 16px solid transparent; 
border-top: 16px solid red; 
} 

Answer 1

變化z-index:0到z-index:-1

試試這個代碼：

fiddle：

.position { 
    border-style: 1px solid red; 
    z-index:1; 
    color:white; 
    font-size:20px; 
    text-align:center; 
    background:red; 
    height: 16px; 
    width: 32px; 
    position: relative; 
    margin: 0 auto; 
    padding-top:2px; 
} 
.position:after { 
    content: ""; 
    z-index:-1; 
    position: absolute; 
    top: 18px; 
    left: 0px; 
    width: 0; 
    height: 0; 
    border-left: 16px solid transparent; 
    border-right: 16px solid transparent; 
    border-top: 16px solid red; 
} 

Answer 2

您可以使用z-index:-1。但是，這將放置在頁面中的所有元素之後。

Demo here

另外，也可以使文本容器具有較大或line-height:value的height:value高度和放置:after僞元素更低，因此它不會覆蓋文本。

Answer 3

您可以查看以下鏈接：

Fiddle here

.position { 
border-style: 1px solid red; 
z-index:1; 
color:white; 
font-size:20px; 
line-height:15px; 
text-align:center; 
background:red; 
height: 18px; 
width: 32px; 
position: relative; 
margin: 0 auto; 

} 
.position:after { 
content: ""; 
z-index:0; 
position: absolute; 
top: 18px; 
left: 0px; 
width: 0; 
height: 0; 
border-left: 16px solid transparent; 
border-right: 16px solid transparent; 
border-top: 16px solid red; 
} 

Answer 4

您的字體大小是20像素，您的高度爲16像素，您的三角形在技術上沒有任何覆蓋，那裏只是沒有足夠的空間來因爲文本大小太大而無法顯示您輸入的空間量。將您的箱子的高度增加到您的字體大小。

http://jsfiddle.net/77af3/3/

.position { 
    border-style: 1px solid red; 
    z-index:1; 
    color:white; 
    font-size:20px; 
    text-align:center; 
    background:red; 
    height: 20px; 
    width: 32px; 
    position: relative; 
    margin: 0 auto; 
    padding-top:2px; 
} 
.position:after { 
    content: ""; 
    z-index:0; 
    position: absolute; 
    top: 22px; 
    left: 0px; 
    width: 0; 
    height: 0; 
    border-left: 16px solid transparent; 
    border-right: 16px solid transparent; 
    border-top: 16px solid red; 
} 

我個人建議不要使用z-index的公司和這樣迫使它看起來像它的渲染好。總是要確保你放入文本的容器自然足夠大以適應它，否則你以後只會遇到其他問題，例如某些字母在邊緣上裁剪（這裏是使用z時出現的那個問題的示例 - 索引解決方案http://jsfiddle.net/77af3/7/）

Answer 5

你根本無法按照你想要的方式去做。但也有其他選擇。在文本

http://jsfiddle.net/77af3/4/

裹span這樣就可以操縱它要容易得多：

我做了這個。我想這對於你想要的會足夠好。

Answer 6

那怎麼樣？

.position { 
    color: transparent; 
    position: relative; 
    z-index: 2; 
    font-size:20px; 
    text-align:center; 
    width: 32px; 
    height: 16px; 
    margin: 0 auto; 
    padding-top:2px; 
    background:red; 
} 
.position:before { 
    content: "MF"; 
    color:white; 
    width: 32px; 
    position: absolute; 
    z-index:1; 
    top: 1px; 
} 
.position:after { 
    content: ""; 
    position: absolute; 
    z-index:0; 
    top: 16px; 
    left: 0px; 
    width: 0; 
    height: 0; 
    border-left: 16px solid transparent; 
    border-right: 16px solid transparent; 
    border-top: 16px solid red; 
} 

http://jsfiddle.net/77af3/5/

Answer 7

嘗試把z-index的在.POSITION：作爲後-1

.position { 
    border-style: 1px solid red; 
    z-index:2; 
    color:white; 
    font-size:20px; 
    text-align:center; 
    background:red; 
    height: 16px; 
    width: 32px; 
    position: relative; 
    margin: 0 auto; 
    padding-top:2px; 

} 
.position:after { 
    content: ""; 
    z-index:-1; 
    position: absolute; 
    top: 18px; 
    left: 0px; 
    width: 0; 
    height: 0; 
    border-left: 16px solid transparent; 
    border-right: 16px solid transparent; 
    border-top: 16px solid red; 
} 

.text { 
    z-index:100; 
} 

檢查：

http://jsfiddle.net/77af3/6/

希望我幫一點。