代码之家 › 专栏 › 技术社区 › Jens Törnell

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

css-shapes svg css html

Jens Törnell · 技术社区 · 8 年前

请参考我的小提琴。我的目标是创建一个三角形(放置在div中),并使其完全适合(角到角)。

以下是概述的规则:

将三角形放置在所有div元素内。
三角形的左下角应该与所有div内的左下角都匹配。
三角形的右上角应该与所有div内的右上角都匹配。
div具有固定的宽度和高度,但在现实生活中,它们都是未知的,是从父代继承的。
对角线的角度对于每个俯冲都会不同,但这没关系。
使用边界、渐变、变换或SVG来解决问题。我不想使用画布或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

2 回复 | 直到 8 年前

Harry dbr 8 年前

通过以下方式实现此效果 border 对于动态大小的容器将是不可能的,因为它们无法获取百分比值或基于容器尺寸的变化进行调整。它们只能使用像素或视口单位。这两种方法对于动态容器都没有多大用处。

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

使用渐变:

您可以使用渐变 to [side] [side] 语法。这是响应性的,适用于所有容器尺寸。唯一的缺点是,在某些情况下,如果宽度或高度与其他情况相比太大,就会出现锯齿状的线条。

这样做的一个优点是,它不需要任何额外的元素(SVG或HTML,甚至不需要伪元素),但缺点是,仅三角形需要悬停和点击效果(仅限于三角形的边界)。由于元素仍然是矩形/正方形,即使鼠标位于三角形之外但位于容器内,也会触发悬停或单击效果。

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

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

使用SVG:

您也可以使用SVG path 元素,如下面的片段所示。SVG必须相对于容器绝对定位,并具有父容器的100%宽度和高度。

对渐变上的三角形使用SVG的优点是,悬停和点击效果可以单独添加到三角形中。

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

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

Choe s 8 年前

在梯度中

风格

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