Html 如何制作三角形内的边框？

我正在用箭头和边框制作块，看起来像

我已经试过了

*{
框大小：边框框；
}
.区块arr{
背景：紫色；
利润率：20px；
右边距：100px；
位置：相对位置；
}
.内挡块{
最小高度：100px；
显示器：flex；
填充：20px；
对齐项目：居中；
位置：相对位置；
}
.块arr.内部：之后{
边框顶部：50px实心透明；
边框底部：50px实心透明；
左边框：50px纯紫色；
内容：''；
位置：绝对位置；
左：100%；
排名：0；
}
.block arr：之后{
边框顶部：50px实心透明；
边框底部：50px实心透明；
左边框：50px纯紫色；
内容：''；
位置：绝对位置；
左：100%；
排名：0；
}

主标题
副标题
< /代码> 我会考虑歪斜变换、嵌入框阴影和一些线性梯度：


*{
框大小：边框框；
}
.区块arr{
填充：50px；
利润率：20px；
右边距：100px；
位置：相对位置；
背景：线性梯度（#fff，#fff）2px 0/2px 100%无重复，紫色；
左边框：2件纯色紫色；
z指数：0；
}
.block arr:之前{
内容：“；
位置：绝对位置；
排名：0；
底部：50%；
左：0；
右：0；
背景：紫色；
边框：5px纯紫色；
边框底部：无；
左边界：无；
盒影：-2px2px 0px#fff插图；
变换：倾斜（25度）；
变换原点：左上角；
z指数：-1；
}
.block arr：之后{
内容：“；
位置：绝对位置；
最高：50%；
底部：0；
左：0；
右：0；
背景：紫色；
边框：5px纯紫色；
边界顶部：无；
左边界：无；
盒影：-2px-2px 0px#fff插图；
变换：倾斜（-25度）；
变换原点：左下角；
z指数：-1；
}

主标题
副标题
主标题

副标题
使用
:after
和
:before
伪元素，我做了这个设计

希望能满足您的要求

谢谢

CSS和HTML:


*{
框大小：边框框；
}
p{margin:0；}
.区块arr{
背景：紫色；
利润率：20px；
右边距：100px；
位置：相对位置；
}
.内挡块{
最小高度：100px；
/*显示器：flex*/
填充：20px；
对齐项目：居中；
位置：相对位置；
}
.块arr.内部：之后{
边框顶部：50px实心透明；
边框底部：50px实心透明；
左边框：50px纯紫色；
内容：''；
位置：绝对位置；
左：100%；
排名：0；
}
.block arr：之后{
边框顶部：50px实心透明；
边框底部：50px实心透明；
左边框：50px纯紫色；
内容：''；
位置：绝对位置；
左：100%；
排名：0；
}
.bordered{position:relative；border:1px solid#fff；border right:none；display:flex；align items:center；padding:20px；}
.带边框：之前，.带边框：之后{
内容：“；
位置：绝对位置；
身高：72%；
宽度：1px；
背景：#fff；
排名：0；
右：0；
z指数：4；
}
.边界：之前{
变换：旋转（45度）；
顶部：自动；
右图：-3.3%；
底部：-11%；
}
.边界：之后{
变换：旋转（-45度）；
前-12%；
右图：-3.3%；
}

主标题
副标题

CSS不是一种图形语言。你可以通过黑客来实现一些图形技巧，但这不是它的设计目的。如果你需要图形，可以使用SVG。是的，CSS中的三角形只能通过破解来实现，因为它并不是专门为此设计的。设置被攻击元素的样式更加困难，因为您使用伪选择器，并且它们只能设置一次样式。您应该使用SVG。@Phiter我不太同意，因为我们可以通过使用聪明的CSS代码实现这一点，甚至更复杂，我们可以轻松地设计样式。。。我们只需要考虑正确的方向。当然，SVG是为图形设计的，但CSS也可以处理简单的图形。伙计们，我也尝试过SVG，但后端开发人员需要尽可能多的html CSS代码，因为它们可以在html中填充易于克隆/附加的内容，所以我在这里询问@temami了解我的情况。再次非常感谢mate@Kumar检查更新我添加了另一个更容易处理的版本；）这真是个不错的主意，伙计--c1

所有浏览器都支持吗？？css4？？？@SureshPonnukalai它不是css4，它们被称为CSS变量，现代浏览器支持它们。。当然IE不是现代浏览器，但谁在乎呢：）@TemaniAfif谢谢你提供的信息。我第一次看到这里。你错过了重要的部分：*我们能让这个箭头高度响应吗？*。。。还有另一行内容，看看发生了什么是的，temami是对的。你做了一个三角形的边界，但错过了响应高度。无论如何，谢谢你的帮助。我真的很感激你是的，它不是从高度自适应的，而是从宽度自适应的。