我需要使用這個形狀並在其中顯示文本。但是，我不知道爲什麼文本是沒有顯示。在DIV中的文本沒有顯示

HTML：

<div id="thebag"> 
    <h3> Shihab Mridha </h3> 
</div>

CSS：

#thebag{ 
    position: relative; 
    overflow: hidden; 
} 
#thebag::before{ 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 50px; 
    width: 30%; 
    background: red; 
} 
#thebag::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 30%; 
    width: 0; 
    height: 0; 
    border-bottom: 50px solid red; 
    border-right: 70px solid transparent; 
}

https://jsfiddle.net/kn87syvb/1/

來源

2016-01-26 Big Guy

[中的z-index：before或：after是元以下，這可能嗎？]的可能的複製（HTTP：/ /stackoverflow.com/questions/3032856/z-index-of-before-or-after-to-be-below-the-element-is-that-possible） – showdev

您需要添加position: relative（或position: inherit，因爲它是同父）到您的#thebag h3類。目前，您的CSS樣式僅影響h3的父級 - 爲了使h3與文本一起顯示，您需要爲其定義CSS樣式。

https://jsfiddle.net/kn87syvb/2/

來源

2016-01-26 18:32:27 litel

稍加說明會有幫助。 – showdev

@showdev我更新了我的答案 –

您需要使用postion:relative屬性：

#thebag h3{ 
    postion:relative; 
}

小的解釋：

position: relative元素相將佈局本身。換句話說，元素按正常流程佈置，然後將其從正常流程中移除，並按您指定的任何值（頂部，右側，底部，左側）進行偏移。重要的是要注意，因爲它從流中移除，所以其周圍的其他元素將不會隨之移動（如果需要此行爲，請使用負邊距）。

但是，您最有可能對position: absolute感興趣，它將相對於容器定位元素。默認情況下，容器是瀏覽器窗口，但是如果父元素的位置設置爲relative或position: absolute，那麼它將作爲父級定位座標的父級。

請這個片段：

https://jsfiddle.net/kn87syvb/4/

來源

2016-01-26 18:34:31

爲了讓'position：absolute'工作，您需要從容器中刪除'overflow：hidden;'聲明，因爲絕對定位固有地將'h3'帶出正常位置容器的流動。 – litel

你是對的！ 'overflow'屬性不會顯示此文本 –

您也可以重新構造你的HTML和CSS如下：

HTML

<span class="start">Shihab Mridha</span> 
<span class="end"></span>

CSS

.end { 
    height:0; 
    width:0; 
    float: left; 
    display: block; 
    border:10px solid #0f92ba; 
    border-top-color:transparent; 
    border-right-color:transparent; 
    border-bottom-color:#0f92ba; 
    border-left-color:#0f92ba; 
} 
.start{ 
    height: 20px; 
    width: 60px; 
    float: left; 
    background: #0f92ba; 
    display: block; 
    color:#FFFFFF; 
}

參考鏈接：https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/

來源

2016-01-26 18:38:31

感謝您的建議@wilbur。我將包括基本部分... –

我修改了我的答案@wilbur .. –

通過設置position:absolute到#thebag::before你「打破」流動，而文字是你的div後面。你必須精確，比h3標籤相對容易。

所以，你必須補充一點：

#thebag h3 { 
    position:relative 
}

精確您#thebag節中的所有H3將受到影響。要小心，如果你改變了你的選擇器類型，它就不再有用了。

可能會更好使用自定義類，這樣https://jsfiddle.net/kn87syvb/5/

來源

2016-01-26 18:40:43 Chilipote

在DIV中的文本沒有顯示

回答

小的解釋：

相關問題