带有边框的响应三角形到容器的高度和宽度[重复]

Question

问题

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

要求

• 三角形应该调整到它的容器的高度和宽度，它不需要保持它的纵横比，这意味着三角形的底和点应该像附图中那样接触容器的边。
• 三角形应有清晰且不模糊的 1 像素边框
• 三角形应该有背景#fff
• 框应该有一个 2 像素的边框
• 框应该有背景#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

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 2

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

This article 似乎为纯 CSS 的响应式三角形提供了一个不错的解决方案

DEMO

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

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

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

Answer 4

如果您可以使用 SVG，那么此解决方案可以为您工作。

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