如何为标题制作这个形状？答案

【问题标题】：how to make this shape for title?如何为标题制作这个形状？
【发布时间】：2017-11-11 06:17:05
【问题描述】：

我想为标题制作这个形状。

我应该使用什么 HTML 和 CSS 来制作这个形状？

【问题讨论】：

尝试左右边框。搜索也会给你一个答案。还要展示你所做的一些努力，以便有人可以帮助你解决代码中的问题
How can I set a css border on one side only?的可能重复

标签： html css

【解决方案1】：

要创建您要求的形状，您可以使用任何 html 标签（在我的例子中，我使用了 h1 标签）。
我给我的标签一个类.title，你可以给任何。对于这个类，我只分配了基本和必需的属性来实现您的要求，您可以根据需要提供任何一组属性。
下面我附上一个sn-p，请过目。

.title {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 20px;
  border-width: 0 0 1px 5px;
  border-style: solid;
  border-bottom-color: #ababab;
  border-left-color: #000;
}

&lt;h1 class="title"&gt;This is my title&lt;/h1&gt;

【讨论】：

@SauravRastogi，我之前没有看到你的帖子，因为我正在写我的帖子。谈论差异并不多，只是使用属性的方式。您分别使用了border-left 和border-bottom，而我使用border-width、border-style 和border-color 来实现相同的效果。

【解决方案2】：

您可以使用border 属性（border-left & border-bottom）来实现这一点，例如：

.title {
  border-left: 5px solid #444;
  border-bottom: 1px solid #444;
  padding-left: 15px;
  line-height: 1.4;
}

&lt;h1 class="title"&gt;This is a title&lt;/h1&gt;

希望这会有所帮助！

【讨论】：

这是我的荣幸@KatePark