写一个左侧标题框,底下线贯穿屏幕,标题框是梯形圆角

可以使用CSS实现一个左侧标题框，底下带有一条贯穿屏幕的线，标题框为梯形圆角的效果。以下是具体的实现代码：

HTML代码：

<div class="title-box">
  <h2>这是一个标题</h2>
</div>

CSS代码：

.title-box {
  position: relative;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 0 10px 10px 0;
  margin-left: -20px;
}

.title-box:before {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  width: 20px;
  background-color: #f0f0f0;
  border-radius: 0 10px 10px 0;
}

.title-box:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background-color: #000;
}

.title-box h2 {
  margin: 0;
  color: #000;
}

/* 悬停效果 */
.title-box:hover:before {
  background-color: #ccc;
}

.title-box:hover h2 {
  color: #fff;
}

解释一下上面的代码实现：

1. 首先，我们创建了一个div元素，并为其添加了一个类名为"title-box"，用于设置其样式。

2. 接着，我们在标题框的左侧通过:before伪元素实现了梯形圆角的效果。具体实现方式是：设置其宽度为20px，高度和边距与标题框相同，同时设置其背景颜色与标题框相同，并将其左侧的border-radius设置为0 10px 10px 0，实现梯形圆角的效果。

3. 然后，我们通过:after伪元素在标题框底部添加了一条贯穿屏幕的线。具体实现方式是：设置其高度为1px，宽度与标题框相同，同时设置其位置为底部，并设置其背景颜色为黑色。

4. 最后，我们设置了标题框的padding、背景颜色、字体颜色，并将其左侧的margin设置为-20px，实现与左侧梯形圆角对齐的效果。

5. 针对悬停效果，我们通过:hover伪类来实现标题框背景颜色和字体颜色的变化。