Text in the DIV not showing

Question

I need to use this shape and inside that shows a text. But, I don't know why the text is not showing.

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/

Possible duplicate of [z-index of :before or :after to be below the element, Is that possible?](http://stackoverflow.com/questions/3032856/z-index-of-before-or-after-to-be-below-the-element-is-that-possible) — showdev, Jan 26 '16 at 18:37

litel · Accepted Answer · 2016-01-26T18:41:12.187

3

You need to add position: relative (or position: inherit, since it's the same as the parent) to your #thebag h3 class. Currently, your CSS styles are only affecting the parent of the h3—in order for the h3 to show with the text, you need to define CSS styling for it.

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

edited Jan 26 '16 at 18:41

answered Jan 26 '16 at 18:32

litel

3,790
3
20
29

3

A little explanation would be helpful. – showdev Jan 26 '16 at 18:32

Alvaro Silvino · Answer 2 · 2016-01-26T18:40:43.923

You need to use postion:relative property:

#thebag h3{
  postion:relative;
}

Small explanation:

position: relative will layout an element relative to itself. In other words, the elements is laid out in normal flow, then it is removed from normal flow and offset by whatever values you have specified (top, right, bottom, left). It's important to note that because it's removed from flow, other elements around it will not shift with it (use negative margins instead if you want this behaviour).

However, you're most likely interested in position: absolute which will position an element relative to a container. By default, the container is the browser window, but if a parent element either has position: relative or position: absolute set on it, then it will act as the parent for positioning coordinates for its children.

please check this snippet:

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

In order for `position: absolute` to work, you'd need to remove the `overflow: hidden;` declaration from the container because absolute positioning inherently takes the `h3` out of the normal positioning flow of the container. — litel, Jan 26 '16 at 18:52
You are right! the `overflow` property will not show this text — Alvaro Silvino, Jan 26 '16 at 18:54

Ariful Islam · Answer 3 · 2016-01-26T20:04:37.773

You can also re-structure your HTML and CSS as follows:

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;
}

Reference Link : https://solutionstationbd.wordpress.com/2011/12/21/trapezoids-shape-with-css/

score 0 · Answer 4 · answered Jan 26 '16 at 18:40

By setting a position:absolute to the #thebag::before you "broke" the flow and your text is behind your div. You have to precise, than the h3 tag will be relative depending it's container.

So you have to add this :

#thebag h3 {
    position:relative
}

To precise all h3 on your #thebag section will be affected. Be careful, if you change your kind of selector, It won t work anymore.

May be it will be better to use a custom class, like this https://jsfiddle.net/kn87syvb/5/

Text in the DIV not showing

4 Answers4

Small explanation:

Linked