背景使用CSS

填寫在上面的文字形狀現在，我們有一個網頁一個網頁上的一堆鏈接部分。每個部分都有一個報頭，像這樣：背景使用CSS

enter image description here

此頭背景實際上是兩個圖像。第一個是長方形，第二個是傾斜的一面。正如我在看這個解決方案，我想知道是否可以用CSS而不是圖像來解決這個問題。雖然我不是CSS大師，但我確實看過一些例子，並能夠得到類似的工作。但是，當我試圖將文本置於背景上時，它會在顏色上方而不是在顏色內部結束。 CSS我也有一個固定的大小，這不是想法。我寧願指定一個可用區域的百分比並填寫顏色。

這裏是我一直使用的代碼：我想在一個表中這適用於電池

<STYLE type="text/css"> 
    .mini_banner 
    { 
    display:inline; 
    border-bottom:30px solid blue; 
    border-left:0px solid transparent; 
    border-right:30px solid transparent; 
    } 
</STYLE>

。我也不想破壞與現代瀏覽器的兼容性。我的「客戶」（主要是內部人員）將主要使用IE8或更高版本，但如果可以幫助的話，我不想限制自己。

因此，首先，這可能嗎？其次，我將如何實現這一目標？第三，有沒有辦法讓它在規模上相對而不是固定的？

來源

2012-04-13 IAmTimCorey

我會說，你可以少頭痛周圍所有的方式，如果你恢復到使用單一背景圖片 - 在這種情況下，切出凹槽白色圖像（PNG-24與alpha透明度）。使其大於您認爲需要約200％，然後做這樣的事情：

.minibanner { 
    background: blue url(..images/notch.png) no-repeat middle right; 
    font-size: 1.5em; 
}

的原因是，依託邊境的大小可能會導致跨瀏覽器的一些whackiness，它肯定會是怪異的，如果任何元素運行到兩行。

如果您將缺口圖像放大200-300％，但將其垂直對齊到背景中間，並且您確實增加了字體大小，則框會增加，但是您的白色凹槽會增大與它一起。

UPDATE：

唯一的其他方法可以讓我看到拉這一關是添加非語義元素，如或類似的東西，你的文本之後：

<div> 
    <p>Hello text</p> 
    <span></span> 
</div>

在

然後你CSS：

p { 
     background: blue; 
     color: white; 
     float: left; 
     padding: 0 20px; 
     height: 50px; 
     margin:0; 
     line-height: 50px; 
     } 
    span { 
     width: 0; 
     height: 0; 
     border-top: 50px solid transparent; 
     border-bottom: 0px solid transparent; 
     display: inline-block; 
     border-left: 50px solid blue; 
    }

看到這個JSFiddle。

The shape is based on this tutorial on CSS triangles。現在，我只在一個基於webkit的瀏覽器上試過這個，並且它可以工作。每次要更改字體大小時都必須調整高度，這是一個缺點。

來源

2012-04-13 13:33:08 chipcullen

我是真的想從這裏具有圖像脫身。當涉及到更改顏色方案或頁面背景等事情時，它使我的柔韌性變差。 – IAmTimCorey 2012-04-13 16:57:18

我明白了 - 看到更新。它包含一個非語義元素。不過，我仍然認爲你的阻力最小的路徑仍然使用單個圖像。 – chipcullen 2012-04-13 17:32:23

感謝您的更新。你一直在幫助很大。我不認爲我有明確的最佳選擇，但我知道如何使每個選擇現在工作。再次感謝。 – IAmTimCorey 2012-04-13 17:58:04

我把它不需要額外的跨度工作：jsFiddle

.mini_banner 
{ 
    width:18em; height:1.5em; 
    color:white; font-weight:bold; padding-left:0.5em; 
    margin-bottom:.5em; 
} 
.mini_banner:before { 
    display:inline-block; content:''; overflow:hidden; 
    width:17em; height:0; 
    margin-bottom:-1.5em; margin-left:-.5em; 
    border-bottom:1.5em solid blue; 
    border-right:1.5em solid transparent; 
}

在FF，Safari瀏覽器，Opera和IE瀏覽器進行測試。（工程在IE8，但不是在IE7）

來源

2012-04-13 18:03:13

這很好。感謝您的額外選項。至於IE7支持，這對我來說是一個小問題，但並不可怕。再次感謝。 – IAmTimCorey 2012-04-13 18:14:14

背景使用CSS

回答

相關問題