我正在开发一个响应式 Web 应用程序，需要创建 2 个单独的内容区域，如下所示，
到目前为止，我试过了，
border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c;
height: 100%;
width: 100%;
position: fixed;
但是，很遗憾无法创建三角形。
除了使用border属性之外，还有其他方法可以使用CSS创建一个三角形，并且可以将内容完全包裹在div中吗？
任何帮助将不胜感激。
【问题讨论】：
标签： html css svg css-shapes
我相信您正在寻找带有边框和中间透明切口的三角形（现有答案似乎都没有解决），所以这里有一个例子。绝对有可能实现，但需要大量的黑客攻击。
使用 CSS 变换：
下面的 sn-p 使用伪元素和变换来产生三角形效果。输出是响应式的，但倾斜变换的使用意味着如果容器的形状变成矩形，则需要修改倾斜角度并进一步调整定位属性等。
.container {
position: relative;
overflow: hidden;
height: 200px;
width: 200px;
}
.div-1,
.div-2 {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
overflow: hidden;
}
.div-1 {
top: calc(-100% - 5px);
transform: skewY(45deg);
transform-origin: left top;
border-bottom: 2px solid;
}
.div-1:after {
position: absolute;
content: '';
height: calc(100% - 2px);
width: calc(100% - 2px);
top: calc(100% + 7px);
left: 0px;
transform: skewY(-45deg);
transform-origin: left top;
border: 1px solid;
}
.div-2 {
top: 5px;
transform: skewY(45deg);
transform-origin: left bottom;
border-top: 1px solid;
}
.div-2:after {
position: absolute;
content: '';
height: calc(100% - 7px);
width: calc(100% - 7px);
top: 0px;
left: 0px;
transform: skewY(-45deg);
transform-origin: left bottom;
border: 1px solid;
}
* {
box-sizing: border-box;
}
/* just for demo */
.container{
transition: all 1s;
}
.container:hover{
width: 400px;
height: 400px;
}
body{
background: radial-gradient(circle at center, aliceblue, mediumslateblue);
min-height: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
<div class='div-1'></div>
<div class='div-2'></div>
</div>使用渐变：
另一种方法是使用几个线性渐变作为背景图像，如下面的 sn-p 所示。但是这里也有很多缺点。 (1) Gradients 目前对浏览器的支持很差。 (2) 角度梯度倾向于产生需要平滑的锯齿线。 (3) 您在相关图像中特别提到了 2 个 div 元素，我认为您想要其中的内容，在这种情况下需要额外的工作。
.container {
position: relative;
overflow: hidden;
height: 200px;
width: 300px;
background: linear-gradient(to top right, transparent calc(50% + 2px), black calc(50% + 2px), black calc(50% + 4px), transparent calc(50% + 4px)), linear-gradient(to bottom left, transparent calc(50% + 2px), black calc(50% + 2px), black calc(50% + 4px), transparent calc(50% + 4px)) ;
}
.container:before{
position: absolute;
content: '';
height: calc(100% - 6px);
width: calc(100% - 6px);
left: 4px;
border-top: 2px solid black;
border-right: 2px solid black;
}
.container:after{
position: absolute;
content: '';
height: calc(100% - 6px);
width: calc(100% - 6px);
top: 4px;
border-left: 2px solid black;
border-bottom: 2px solid black;
}
/* just for demo */
.container{
transition: all 1s;
}
.container:hover{
width: 700px;
height: 400px;
}
body{
background: radial-gradient(circle at center, aliceblue, mediumslateblue);
min-height: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
</div>使用 SVG：
所有这些都让我想到了我的建议，即使用 SVG 来创建这样的形状。只需使用 path 元素即可轻松创建它们，易于维护且响应迅速。
.container {
position: relative;
height: 300px;
width: 200px;
}
svg {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
}
svg path {
fill: transparent;
stroke: black;
}
/* just for demo */
.container {
transition: all 1s;
}
.container:hover {
height: 400px;
width: 700px;
}
body {
background: radial-gradient(circle at center, aliceblue, mediumslateblue);
min-height: 100vh;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='container'>
<svg viewBox='0 0 100 100' preserveAspectRatio='none'>
<path d='M4,2 L98,2 98,96 4,2z M2,4 L2,98 96,98 2,4z' vector-effect='non-scaling-stroke' />
</svg>
</div>注意：使用上述任何一种方法（或其他答案中给出的方法），您不能使内容保持在这些三角形的边界内。文本可以放在它们上面，但文本不能包含在这些边界内，除非 CSS Shapes 模块的
shape-inside属性完全实现。
【讨论】：
shape-inside 的浏览器支持，并确保它适用于您需要支持的所有浏览器。
只要不给宽度和高度就会变成三角形。
.triangle1 {
border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c;
position: fixed;
}
根据您的图片，我创建了两个反向三角形。
.triangle1 {
border-right: 100px solid transparent;
border-bottom: 100px solid #4c4c4c;
position: fixed;
}
.triangle2 {
border-left: 100px solid transparent;
border-top: 100px solid #4c4c4c;
position: fixed;
margin-left: 3px;
}<div class="triangle1">
</div>
<div class="triangle2">
</div>编辑：
这是在三角形内添加文本的一种方法。
在三角形内添加另一个文本 div 并设置它的位置。
【讨论】：
.triangle1 {
width: 0;
height: 0;
border-left: 0px solid transparent;
border-right: 200px solid transparent;
border-bottom: 150px solid black;
}
对于 DIV 元素 1。对于第二个，只需制作一个正方形并在正方形顶部渲染三角形。
【讨论】：
HTML代码：
<div id="DIV-Element1"></div>
<div id="DIV-Element2"></div>
CSS：
#DIV-Element1 { width: 0; height: 0; border-bottom: 100px solid black; border-right: 100px solid transparent; }
#DIV-Element2 { width: 0; height: 0; margin-left: 15px;border-top: 100px solid black; border-left: 100px solid transparent; }
你可以通过改变边框来调整你的三角形
我希望这会奏效
【讨论】：