DIV 中的文字未显示

Question

我需要使用此形状并在其中 显示文本 。但是，我不知道为什么文字 不显示 。

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/

Answer 1

您需要将 position: relative（或 position: inherit，因为它与父项相同）添加到您的 #thebag h3 class。目前，您的 CSS 样式仅影响 h3 的父级 — 为了使 h3 与文本一起显示，您需要为其定义 CSS 样式。

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

Answer 2

您需要使用 postion:relative 属性:

#thebag h3{
  postion:relative;
}

小说明：

position: relative 将布局相对于自身的元素。换句话说，元素按正常流布置，然后从正常流中移除并偏移您指定的任何值（上、右、下、左）。重要的是要注意，因为它已从流中移除，所以它周围的其他元素不会随之移动（如果你想要这种行为，请使用负边距）。

但是，您很可能对 position: absolute 感兴趣，它会相对于容器定位元素。默认情况下，容器是浏览器 window，但如果父元素设置了 position: relative 或 position: absolute，那么它将作为父元素为其子元素定位坐标。

请检查此片段：

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

Answer 3

您还可以 re-structure 您的 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;
}

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

Answer 4

通过将 position:absolute 设置为 #thebag::before，您 "broke" 的流程和文本位于 div 之后。你必须精确，而不是 h3 标签将是相对的取决于它的容器。

所以你必须添加这个：

#thebag h3 {
    position:relative
}

准确地说，#thebag 部分的所有 h3 都会受到影响。小心，如果你改变了你的选择器类型，它将不再起作用。

可能使用自定义 class 会更好，像这样 https://jsfiddle.net/kn87syvb/5/

DIV 中的文字未显示

Text in the DIV not showing

css

web-deployment

小说明：