Html 创建带边框的三角形div

我在网站的左上角有一个三角形

角落{ 位置：绝对位置； z指数：999； 左：0； 排名：0； 宽度：0； 身高：0； 边框顶部：50px实心000； 边框底部：50px实心透明； 右边框：50px实心透明； 左边框：50px实心000； } 创建两个div：

角落{ 位置：绝对位置； z指数：999； 左：0； 排名：0； 宽度：0； 身高：0； 边框顶部：55px实心f00； 边框底部：55px实心透明； 右边框：55px实心透明； 左边框：55px实心f00； } 角内{ 位置：绝对位置； z指数：999； 左：-55px； 顶部：-55px； 宽度：0； 身高：0； 边框顶部：50px实心000； 边框底部：50px实心透明； 右边框：50px实心透明； 左边框：50px实心000； }

---

我相信实现您想要的最好方法是使用transform属性，而不是操纵边界，甚至可能需要两个元素和大量不必要的代码

查看此代码段或以下代码段以获得可视化表示

片段：

角落{ /*尺寸*/ 高度：200px； 宽度：200px； /*定位*/ 位置：绝对位置； 左：-7.5em； 顶部：-7.5em； z指数：999； 变换：旋转-45度； /*造型*/ 背景色：红色； 边框底部：5px实心0c； }

---

您甚至可以尝试伪元素：before和：after

角落{ 位置：绝对位置； z指数：1； 左：0； 排名：0； 宽度：0； 身高：0； 边框顶部：50px实心000； 边框底部：50px实心透明； 右边框：50px实心透明； 左边框：50px实心000； } 角落：以前{ 内容：； 位置：绝对位置； 边框顶部：5px纯红； 左边框：5px纯红； 顶部：-50px； 左：-50px； 宽度：92px； 高度：92px； } 角落：之后{ 内容：； 位置：绝对位置； 右边框：5px纯红； 顶部：-104px； 左：-83px； 宽度：93px； 高度：140像素； 变换：旋转45度； }

---

我把三角形变成黑色使它可见，然后我想我还必须反转边框的颜色。但是如果边界和三角形的颜色相同，我就看不出有什么意义。把它放大。请进一步解释或显示你想要的输出是什么。你的问题没有多大意义。很抱歉，问题的编辑改变了我的问题。我将澄清可能重复的不是那种类型的三角形我假设这是最好的回应，我只需要在顶部加上一个徽标，我不想叠加到很多divsYeah，到目前为止。。。我想这很简单。我无法用其他任何方法来实现这一点。user3550879只希望边界位于三角形的一侧。@IShad0wk我认为它需要覆盖它的所有角落边界：红色；编辑-我想它有一个5px的红色边框只在有角度的一面，所以三角形和边框是不同的颜色-用户3550879。