Question

我在HTML中有一个div，其中包含一些文字。
div是通过设置X，Y坐标和{{height来创建的。 1}}和width。
我想绘制一个三角形叠加div以便我的内容不会丢失我无法更改X，Y坐标，因为我的其他div定位基于此div。
使用多个div方法生成三角形似乎也不可行，因为我不确定div我会写出我的文本......

有人可以提出一个关于如何做到这一点的想法吗？

Answer 1

您可以使用图像执行此操作，但更有趣的方法是使用div的边框来制作三角形。

.triangle {
     font-size: 0px; 
     line-height: 0%; 
     width: 0px;
     border-bottom: 20px solid #000;
     border-left: 10px solid #000;
     border-right: 10px solid #000;
}

如何更清楚地解释这项工作here

Answer 2

使用此代码开发三角形：

<强> CSS

.triangle {
    width:0; 
    border-bottom:120px solid red; 
    border-left:60px solid white; 
    border-right:60px solid white;
}

<强> HTML

<div class="triangle"></div>

如何从DIV创建一个三角形

2 个答案: