Question

我想在我的div顶部添加对角线条纹。我将使用SVG来创建它（或者我可以使用CSS）。我可以通过媒体查询来做到这一点，但我想知道是否存在一种使用CSS自动解决此问题的方法。

如果我知道身高，我可以这样做，并且可以将身高手动添加到媒体查询中（这不是一项很长的工作）。但是肯定有更聪明的方法吗？

我尝试查看calc ，但这再次取决于我们知道宽度或百分比或类似值。

我不想使用JavaScript。

这是我的代码：

.itemTitle--padder {
  position: absolute;    
  bottom: 0;
  width: 100%;
}
 .itemTitle--padder::before {
  background: url('../../../../images/joomla-london-brand-assets/videos-diagonal-background.svg?5d167918') no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;    
  display: block;
  content: "";
  margin-top: -56px;
}

.itemTitle--holder  {
  position: relative;
  width: 100%;
  height: 100%;
  background: $dark-blue;
  padding: 0.25rem 0.5rem;
}

<div class="itemTitle--padder">
  <div class="itemTitle--holder">
    <div class="itemTitle">
      The Title of thing I'm creating
    </div>					
  </div>
</div>

目前，这完全取决于我的负利润。还有另一种方法可以实现这一目标吗？

尝试实现此目标的主要原因是因为.itemTitle div中的内容可以是可变长度

Answer 1

在Gregs建议之后，我意识到使用:: before并不是实现此目的的好方法，因为它总是会从其父级那里继承一些东西。

我最终使用了两个divs。

HTML

<div class="itemTitle--padder">
  <div class="itemTitle--image">
    <img src="../../../../images/joomla-london-brand-assets/videos-diagonal-background.svg" alt="" width="100%" height="auto">
  </div>
  <div class="itemTitle--holder">
    <div class="itemTitle">
      The Title
    </div>                  
  </div>                                
</div>

SCSS

  .itemTitle--padder {
    position: absolute;    
    bottom: 0;
    width: 100%;
  }

  .itemTitle--holder  {
    position: relative;
    width: 100%;
    height: 100%;
    background: $dark-blue;
    padding: 0.25rem 0.5rem;
  }

  .itemTitle--image {
    width: 100%;
    img {
      position: absolute;
      bottom: calc(100% - 1px);
    }
  }

我可以在不知道高度的情况下，将:: before元素快速添加到其父元素的顶部吗？

1 个答案: