创建一个只有 CSS 的三角形

Question

我正在开发响应式 Web 应用程序，需要创建 2 个独立的内容区域，如下所示，

到目前为止，我试过了，

border-right: 30px solid transparent;
border-bottom: 30px solid #4c4c4c; 
height: 100%;
width: 100%;
position: fixed;

但是，遗憾的是无法创建三角形。

除了使用边框属性之外，是否有任何其他方法可以使用 CSS 创建三角形，并且可以将内容完全包裹在 div 中？

如有任何帮助，我们将不胜感激。

Answer 1

.triangle1 {
    width: 0; 
    height: 0; 
    border-left: 0px solid transparent;
    border-right: 200px solid transparent;
    border-bottom: 150px solid black;
}

对于 DIV 元素 1。对于第二个元素，只需制作一个正方形并在正方形的顶部渲染三角形。

Answer 2

只要不给出宽度和高度就会形成三角形。

.triangle1 {
    border-right: 30px solid transparent;
   border-bottom: 30px solid #4c4c4c; 
   position: fixed;
}

Working Fiddle

根据你这里的图片，我创建了两个倒三角形。

.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 并设置它的位置。

Fiddle

Answer 3

Html code :

<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; }

you can adjust your triangle by changing border

我希望这能奏效

Answer 4

我相信您正在寻找带有边框且中间有透明切口的三角形（none 现有答案似乎可以解决），所以这里有一个例子。这绝对有可能实现，但需要大量的黑客攻击。

使用CSS转换：

下面的代码片段使用 pseudo-elements 并进行变换以产生三角形效果。输出是响应式的，但是倾斜变换的使用意味着如果容器的形状变成矩形，那么倾斜角度将需要修改，并且需要对定位属性等进行更多调整。

.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>

使用渐变：

另一种方法是使用几个线性渐变作为背景图像，如下面的代码片段所示。但是这里也有很多缺点。 (1) 目前浏览器对渐变的支持很差。 (2) Angular 渐变往往会产生需要平滑的锯齿状线条。 (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>

Note: With any of the approaches mentioned above (or those given in other answers), you cannot make the content to remain within the boundaries of those triangles. Text can be placed upon them but the text cannot be contained within those boundaries unless the CSS Shapes module's shape-inside property is fully implemented.

创建一个只有 CSS 的三角形

Creating a triangle with only CSS

html

css

svg

css-shapes