html - 只用 CSS 创建一个三 Angular 形

Question

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

到目前为止，我尝试过，

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

但是，不幸的是无法创建三 Angular 形。

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

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

Answer 1

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

使用 CSS 转换:

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

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