响应三角形与边框到容器的高度和宽度

Question

问题

我需要创建一个容器盒，其中包含一个响应容器大小的三角形轮廓，这是一个图像示例，因为它更简单：

要求

• 三角形应该调整到它的容器的高度和宽度，它不需要保持它的纵横比，这意味着三角形的底边和点应该像附加的图像一样接触容器的边。
• 三角形应具有清晰且不模糊的1px边框
• 三角形应具有背景#fff
• 该框应具有2px边框
• 该框应具有背景#fff

的问题

我尝试了一些基本围绕子div的边框，但动态定位它的相对宽度和高度证明是个问题。

仅获得三角形的轮廓而不是完全着色的三角形。这意味着使用边框创建三角形变得更加复杂，除非有人可以弄清楚如何将一个放在另一个上面以使白色背景具有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

此示例创建响应式三角形，但它们需要翻转并使更宽的部分位于绝对位置left:0; right:0; top:0;

Answer 1

取决于您用于容器的单位，如果它的大小取决于视口，您可以使用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>

---

如果您只想要三角形的轮廓，并且如果您有简单的背景，则可以使用此方法：

重点是在第一个三角形上放置一个与背景颜色相同的三角形：

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

Answer 2

See here

• 这使用了一种很棒的技术，使用渐变来创建形状。

• 你可能想弄清楚它并看到：

body, html {height: 100%}
#triangleWrapper {
    width: 100px;
    height:200px;
    border:1px solid black;

}

.segmentTriangle {
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background: linear-gradient(to right bottom, black 50%, transparent 50%)
}

    <div style="float: left;" id="triangleWrapper">
        <div style="height: 100%;" class="segmentTriangle"></div>
    </div>
    
</div>

<强> updated fiddle

---

仅限大纲

---

通过使用渐变的力量，您可以创建纯粹的轮廓，如下所示：

body,
html {
  height: 100%;
}
#triangleWrapper {
  width: 500px;
  height: 200px;
  border: 2px solid black;
  overflow: hidden;
}
.segmentTriangle {
  width: 200%;
  height: 100%;
  margin-left: -100%;
  background: linear-gradient(to left top, transparent 49%, black 50%, transparent 50%), linear-gradient(to left bottom, transparent 49%, black 50%, transparent 50%);
}

<div id="triangleWrapper">
  <div class="segmentTriangle"></div>
</div>

---

更新

---

Right Triangle

Up Triangle

Down Triangle

Left Triangle

---

注意 为确保“边框”不会被切断，您可以在父容器上设置overflow:hidden;

Answer 3

对于具有纯CSS的响应三角形

This article似乎有一个很好的解决方案

<强> DEMO

＆＃13;

＆＃13;

.triangle-up {
  width: 25%;
  height: 0;
  padding-left: 25%;
  padding-bottom: 25%;
  overflow: hidden;
  border: 1px solid brown;
  margin: 20px;
}
.triangle-up div {
  width: 0;
  height: 0;
  margin-left: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-bottom: 500px solid #4679BD;
}
.triangle-right {
  width: 0;
  height: 0;
  padding-top: 25%;
  padding-bottom: 25%;
  padding-left: 25%;
  overflow: hidden;
  border: 1px solid green;
  margin: 20px;
}
.triangle-right div {
  width: 0;
  height: 0;
  margin-top: -500px;
  margin-left: -500px;
  border-top: 500px solid transparent;
  border-bottom: 500px solid transparent;
  border-left: 500px solid tomato;
}

＆＃13;

<div class="triangle-up">
  <div></div>
</div>

<div class="triangle-right">
  <div></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

如果您可以使用SVG，此解决方案可以为您服务。

您可以使用SVG创建根据其父级更改的箭头。您可以在http://css-tricks.com/查看工作箭头（正在使用的箭头）。当您向下滚动第二篇文章链接时，您可以看到箭头。如果要更改箭头父锚标记宽度和高度，并将其块属性设置为块。您将看到箭头正在根据其父级进行更改。您可以在任何浏览器中使用“检查”栏来查看结果。