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

Posted 2023-03-06

技术标签:

【中文标题】带有边框的响应三角形到容器的高度和宽度[重复]【英文标题】：Responsive triangle with border to container's height and width [duplicate] 【发布时间】：2015-02-17 01:22:00 【问题描述】：

问题

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

要求

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

【问题讨论】：

评论不用于扩展讨论；这个对话是moved to chat。 【参考方案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;

【讨论】：

差不多了，只需要一个等腰而不是直角三角形？ @JamesDonnelly：见“新的更新答案” 即使线条模糊，这个解决方案也可以工作，因为三角形的大小取决于容器的大小，无论使用什么单位：jsfiddle.net/webtiki/v1cczusd this is too much fun! :P【参考方案2】：

根据您用于容器的单位，如果它的大小取决于视口，您可以使用vw/vh units 实现此行为：

DEMO

divwidth: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>

【讨论】：

vh 和 vw 单位等于窗口的大小，而不是特定容器的大小。 @JamesDonnelly 你是对的，在答案中添加了if 声明。还有只获取图片中的三角形轮廓/边框的问题呢？ @Silver89 你有纯色背景吗？容器会有一个border:1px solid #000;，三角形也会有一个background:#fff;【参考方案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>

【讨论】：

如果只是三角形的轮廓，那就是这个！我需要三角形有白色背景和 1px 边框，实心三角形不允许这样做？三角形只要是容器大小不变形 @web-tiki - OP 说：“基本上三角形应该调整大小而不会扭曲......”所以我认为三角形确实需要保持它们的纵横比 @JamesDonnelly：OP 的要求似乎与我们想象的有所不同。这几乎是“自动缩放三角形，但它必须是三角形的轮廓，三角形应该填满容器，但不能扭曲”。听起来像是相互矛盾的要求，（无论如何对我来说）。【参考方案4】：

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

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

【讨论】：

以上是关于带有边框的响应三角形到容器的高度和宽度[重复]的主要内容，如果未能解决你的问题，请参考以下文章