小解释：

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

您需要将<Label Content="{Binding type, converter={StaticResource Duh}}"/>（或position: relative，因为它与父级相同）添加到position: inherit课程。目前，您的CSS样式仅影响#thebag h3的父级 - 为了使h3与文本一起显示，您需要为其定义CSS样式。

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

Answer 2

您需要使用postion:relative属性：

#thebag h3{
  postion:relative;
}

小解释：

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

但是，您最有可能对position: absolute感兴趣，position: absolute将相对于容器定位元素。默认情况下，容器是浏览器窗口，但如果父元素在其上设置了position：relative或background-size: 100% 100%;，那么它将作为其子元素的定位坐标的父元素。

请查看此代码段：

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

Answer 3

您还可以按照以下方式重新构建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/

Answer 4

通过将position:absolute设置为#thebag::before，您“打破”了流量，您的文字就在您的div后面。你必须精确，因为h3标签将是相对的，取决于它的容器。

所以你必须添加这个：

#thebag h3 {
    position:relative
}

准确地说，＃thebag部分的所有h3都会受到影响。要小心，如果你改变你的选择器，它就不再工作了。

使用自定义类可能会更好，例如https://jsfiddle.net/kn87syvb/5/

DIV中的文字没有显示

4 个答案:

小解释：