我知道了,到目前为止,我想将三 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>
最佳答案
默认情况下,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>
关于css - 如何使用 CSS 创建平行四边形,但没有转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44081214/