Question

请参考我的小提琴。我的目标是创建一个三角形（放在div中），并使其完全适合（角落到角落）。

以下是规则：

将三角形放在所有div元素中。
三角形的左下角应该适合所有div中的左下角。
三角形的右上角应该适合所有div中的右上角。
divs具有固定的宽度和高度但在现实生活中它们都是未知的，继承自父母。
每个div的对角线角度都不同，但没关系。
使用边框，渐变，变换或SVG来解决问题。我不想使用像canvas或PNG这样的固定像素解决方案。

.one {
  width: 100px;
  /* Unknown */
  height: 30px;
  /* Unknown */
  background: #ccc;
}
.two {
  width: 40px;
  /* Unknown */
  height: 90px;
  /* Unknown */
  background: #aaa;
}
.three {
  width: 70px;
  /* Unknown */
  height: 70px;
  /* Unknown */
  background: #aaa;
}
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent transparent #007bff transparent;
}

<div class="one"></div>
<br>
<div class="two"></div>
<br>
<div class="three"></div>
<br>

<div class="triangle"></div>

JSFiddle Reference

Answer 1

对于动态大小的容器，无法使用border实现此效果，因为它们无法获取百分比值或根据容器维度的变化进行调整。它们只能使用像素或视口单元。这些对于动态容器来说都不会有多大用处。

可以通过在容器顶部放置一个伪元素来使用变换，但是它们需要根据三角方程计算元素的高度和宽度。更简单的是梯度和SVG方法。

使用渐变：

您可以使用带to [side] [side]语法的渐变来执行此操作。这是响应性的，适用于所有容器尺寸。唯一的缺点是在某些情况下会出现锯齿状线条，其宽度或高度与另一个相比太大。

这样做的一个优点是它不需要任何额外的元素（SVG或HTML，甚至不是伪），但缺点是当单独的三角形需要悬停和点击效果时（仅限于三角形＆＃） 39; s边界）。由于元素仍然是矩形/正方形，因此即使鼠标位于三角形之外但位于容器内，也会触发悬停或单击效果。

＆＃13;

.one {
  width: 100px;
  height: 30px;
  background-color: #ccc;
}
.two {
  width: 40px;
  height: 90px;
  background-color: #aaa;
}
.three {
  width: 70px;
  height: 70px;
  background-color: #aaa;
}
div {
  background-image: linear-gradient(to top left, blue 50%, transparent 51%);
}

＆＃13;

<div class="one"></div>
<br>
<div class="two"></div>
<br>
<div class="three"></div>
<br>

＆＃13;

使用SVG：

您也可以使用SVG path元素执行此操作，如下面的代码段所示。 SVG必须完全相对于容器定位，并且具有父母宽度和高度的100％。

在梯度上使用SVG作为三角形的优点是悬停和点击效果可以单独添加到三角形中。

＆＃13;

.one {
  width: 100px;
  height: 30px;
  background-color: #ccc;
}
.two {
  width: 40px;
  height: 90px;
  background-color: #aaa;
}
.three {
  width: 70px;
  height: 70px;
  background-color: #aaa;
}

div{
  position: relative;
}
div > svg {
  position: absolute;
  height: 100%;
  width: 100%;
}
svg path{
  fill: #0007bf;
}
svg path:hover{
  fill: crimson;
}

＆＃13;

<div class="one">
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M100,0 L100,100 0,100z' />
  </svg>
</div>
<br>
<div class="two">
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M100,0 L100,100 0,100z' />
  </svg>
</div>
<br>
<div class="three">
  <svg viewBox='0 0 100 100' preserveAspectRatio='none'>
    <path d='M100,0 L100,100 0,100z' />
  </svg>
</div>
<br>

＆＃13;

Answer 2

在渐变中

式

.triangle {
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, #007bff 50%, #007bff 100%)
}

HTML

<div class="one">
  <div class="triangle"></div>
</div><br>
<div class="two">
  <div class="triangle"></div>
</div><br>
<div class="three">
  <div class="triangle"></div>
</div>

CSS三角形适合可变大小的div元素

2 个答案: