html - 可以改进这个 CSS 解决方案以获得更好的响应能力吗？

Question

基本上我有这个布局，你可以在下面的屏幕截图中看到。

.project-name {
  margin-top: -50px;
  width: 100%;
  border-bottom: 100px solid #fff;
  border-right: 100px solid transparent;
}
.project-name h2 {
  position: absolute;
  left: 0;
  top: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-mg-12">
        <img src="http://placeimg.com/1000/480/any" />
    </div>
  </div>
 </div>
 <div class="container">
 <div class="row">
 <div class="col-md-8 project-name">
 <h2>
 Project Name
 </h2>
 </div>
 </div>
 </div>

我拥有的 CSS 解决方案正在运行，我想知道是否有更好的方法来获得类似的结果？

标签： htmlcss

Answer 1

现在，您的代码的问题是您当前有2 行，并且您正在使用位置和边距来强制它们粘在一起。

当您进行移动响应更改时，您需要修复很多可能使其变得复杂的问题。

相反，专注于使父 div 相对定位，子 div 绝对定位到其 parent。

这样，当您可以使用媒体查询并在响应性方面轻松调整每个断点的值时。

尝试这个：

.project-name {
  border-bottom: 100px solid #ffffff;
  border-right: 50px solid transparent;
  height: 0;
  width: 80%;
  background-color: transparent;
  position: absolute;
  bottom: 100px;
}

.project-name h2 {
  margin-top: 40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-mg-12">
        <img src="http://placeimg.com/1000/480/any" />
    </div>
  </div>
 </div>
 <div class="container">
   <div class="row">
     <div class="col-md-8 project-name">
       <h2>
       Project Name
       </h2>
     </div>
   </div>
 </div>

解释：

我创建了一个类名为的父级，.project并将其设置为具有relative 的位置。

现在，在 内.project，我们放置了图像。而且，还有一个类名为.project-name.

我正在做的.project-name是使用边框制作形状，然后我们将高度设置为 0，以便边框折叠到内部的 h2 上，然后我们可以将其绝对定位到其父 div 的底部。

继续并更改这些 css 值以适合您首选的边距长度、宽度等。

编辑1：

您已要求必须将文本“项目名称”包裹在带有.container类的 div 周围。

我已经相应地更新了答案。请查看并注意以下事项：

• 添加了一个新的 CSS 作为.container引导程序的全局类，编辑它不是一个好主意，因此，我们通过添加来引用该特定容器.project .container。这样，只有.container内部 a.project会受到影响，这正是我们想要做的。
• 这个想法仍然是一样的，因为.container包裹“项目名称”这个词的 new在它的 parent 里面.project，我们再次将它绝对定位到它的 parent 因此，我们可以将它一直移动到左边。

编辑2：

• 复制了与您提供的相同的HTML结构

• 编辑片段