Question

我正在努力应对响应三角形 - 我需要创建一个适合屏幕宽度的三角形，但当屏幕宽度变小时，它的宽度不会改变。

Answer 1

试试这个

background-size: 100% 150px;

Answer 2

我提出了一个解决方案，它添加了两个三角形（每个都有50％的宽度）并使用线性渐变：

＆＃13;

#triangle {
  overflow: auto;
}

#triangle span {
  width:50%;
  height: 40px;
  float: left;
}

#triangle span:first-child {
  background: linear-gradient(to top left, orange 50%, transparent 50%);
}

#triangle span:nth-child(2) {
  background: linear-gradient(to top right, orange 50%, transparent 50%);
}

＆＃13;

<div id="triangle">
  <span></span><span></span>
</div>

＆＃13;

要使三角形保持初始宽度，可以添加以下js：

var triangle = document.getElementById('triangle');
var width = triangle.offsetWidth;
triangle.style.setProperty('width', width+"px");

See the JSFiddle进行演示。

CSS：是否可以在屏幕大小的宽度上绘制一个具有静态高度的三角形

2 个答案: