问题
我需要创建一个容器框，其中包含一个三 Angular 形轮廓，该轮廓可响应容器的大小，这是一个图像示例，因为它要简单得多:
要求
- 三 Angular 形应根据其容器的高度和宽度调整大小，它不需要保持纵横比，这意味着三 Angular 形的底边和点应像附图中那样接触容器的边。
- 三 Angular 形应该有清晰且不模糊的 1px 边框
- 三 Angular 形应该有背景
#fff
- 盒子应该有一个 2px 的边框
- 盒子应该有背景
#fff
问题
我尝试了一些在子 div 周围设置边框的基本方法，但事实证明，使用相对宽度和高度动态定位它是个问题。
仅获取三 Angular 形的轮廓而不是全彩色三 Angular 形。这意味着使用边框创建三 Angular 形变得更加复杂，除非有人能弄清楚如何将一个三 Angular 形放置在另一个顶部以提供具有 1px 边框效果的白色背景，如图像所示？
一个例子
jsFiddle demo
.pane{
border:1px solid #000;
height:500px;
margin:auto;
margin-top:150px;
position:relative;
width:400px;
}
.triangle{
width: 0;
height: 0;
border-top: 250px solid transparent;
border-bottom: 250px solid transparent;
border-left: 250px solid #ff0000;
}
<div class="pane">
<div class="triangle">
</div>
</div>
例子2
jsFiddle Demo
此示例创建了响应式三 Angular 形，但需要将它们翻转并让较宽的部分绝对定位 left:0;右:0；顶部:0;
根据您用于容器的单位，如果它的大小取决于视口(viewport)，您可以使用 vw/vh units 实现此行为:
DEMO
div{width:0;outline:1px solid red;}
.r{
border-top:15vh solid transparent;
border-bottom:15vh solid transparent;
border-left:50vw solid teal;
}
.t{
border-left:15vw solid transparent;
border-right:15vw solid transparent;
border-bottom: 50vh solid gold;
}
<div class="r"></div>
<div class="t"></div>
如果你只想要三 Angular 形的轮廓并且你有一个简单的背景，你可以使用这种方法:
重点是在第一个三 Angular 形上放置另一个与背景颜色相同的三 Angular 形:
DEMO
div {
position: relative;
overflow: hidden;
outline: 1px solid red;
}
.r {
width: 50vw;
height: 30vh;
border-left: 2px solid teal;
}
.t {
height: 50vh;
width: 30vw;
border-bottom: 2px solid gold;
}
.r:after,
.r:before,
.t:after,
.t:before {
content: '';
position: absolute;
top: 0;
left: 0;
}
.r:before,
.r:after {
border-top: 15vh solid transparent;
border-bottom: 15vh solid transparent;
border-left: 50vw solid teal;
}
.r:after {
border-left-color: #fff;
left: -1vw;
}
.t:before,
.t:after {
border-left: 15vw solid transparent;
border-right: 15vw solid transparent;
border-bottom: 50vh solid gold;
}
.t:after {
border-bottom-color: #fff;
bottom: -1vh;
}
<div class="r"></div>
<div class="t"></div>