css - 如何使用 CSS 创建平行四边形，但没有转换

Question

我知道了，到目前为止，我想将三 Angular 形​​和矩形放在一起得到一个平行四边形。有什么想法吗？

https://jsfiddle.net/pu17bbfo/

我不能使用转换，因为这是针对 wkhtmltopdf 的，它不支持它们。

代码:

<div style="display: block; ">
<div style="width: 0;
height: 0;
border-style: solid;
border-width: 0 0 72px 40px;
border-color: transparent transparent #f17522 transparent; display: inline-block;">
</div>
<div style="height: 72px; background-color: #f17522; display: inline-block;">
<p style="color: #fff">Talking Points Name</p>
</div>
<div style="width: 0;
height: 0;
border-style: solid;
border-width: 72px 40px 0 0;
border-color: #f17522 transparent transparent transparent; display: inline-block;">
</div>
</div>

Answer 1

默认情况下，inline-block 元素会有vertical-align: baseline。您可以在那里使用 top 或 bottom，它们将垂直对齐。然后要么删除元素之间的空白以消除间隙，要么在此处放置 HTML 注释以删除页面上显示的空白。

.headline {
  height: 72px;
  color: #fff !important;
  background-color: #f17522;
  white-space: nowrap !important;
}

div {
  vertical-align: bottom;
}

<div style="display: block; ">
  <div style="width: 0;
height: 0;
border-style: solid;
border-width: 0 0 72px 40px;
border-color: transparent transparent #f17522 transparent; display: inline-block;">
  </div><!--
--><div style="height: 72px; background-color: #f17522; display: inline-block;">
    <p style="color: #fff">Talking Points Name</p>
  </div><!--
--><div style="width: 0;
height: 0;
border-style: solid;
border-width: 72px 40px 0 0;
border-color: #f17522 transparent transparent transparent; display: inline-block;">
  </div>
</div>