Question

我正在尝试在矩形div上创建一个Triangle。三角形必须是页面的宽度，并且必须具有响应性。 div的右上和左上部分（不存在三角形）需要透明。

我有一张看起来应该是什么样的图像，但是由于相似的深色，很难看到。矩形div的右上和左下必须透明。

有人知道我如何在下图中重新创建突出显示的矩形吗？

我已经通过搜索stackoverflow尝试了几个小时，但无法从其他问题中找出答案。

谢谢！

Answer 1

您可以尝试：

<html>
<body>

<style>

body {
    margin: 0;
}

.rectangle {
    width: 100%;
    height: 100px;
    background: #777;
}

.triangle-up {
    width: 0;
    height: 0;
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
    border-bottom: 100px solid black;
}

</style>

<div class='rectangle'>
    <div class='triangle-up'></div>
</div>

</body>
</html>

（我更改了颜色以便于查看）

如何在矩形div上方制作三角形div？

1 个答案: