Question

我有这个，到目前为止，我想把三角形和矩形放在一起得到一个平行四边形。有什么想法吗？

我无法使用转换，因为这是针对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注释以删除页面上显示的空白区域。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

在div中使用absolute位置。

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

2 个答案: