一条线中的三角形 HTML/CSS 网页设计

Question

我目前正在为一个班级设计一个网站，但我无法弄清楚如何排列三角形以形成菱形。

谢谢大家的帮助。

以下是页面：

代码如下：

Answer 1

如果可能的话，我建议您使用 SVG 而不是 HTML 元素。如果您必须使用 html 元素，您可以执行以下操作：

.diamond {
  position: relative;
  display:inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 50px 0;
  border-color: transparent #007bff transparent transparent;
}
.diamond:after {
  content:'';
  position: relative;
  display:inline-block;
  top:-50px;
  left:50px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 50px;
  border-color: transparent transparent transparent #007bff;
}

与 html 一起使用：

<div class="diamond"></div>

密码笔

Answer 2

遵循示例 添加 HTML：

右箭头：

左箭头：

向上箭头：

向下箭头：

添加 CSS：

.arrow { 边框：实心黑色； 边框宽度：0 3px 3px 0； 显示：内联块； 填充：3px； }

.right { 变换：旋转（-45度）； -webkit-transform：旋转（-45度）； }

.left { 变换：旋转（135度）； -webkit-transform：旋转（135度）； }

.up { 变换：旋转（-135度）； -webkit-transform：旋转（-135度）； }

.down { 变换：旋转（45度）； -webkit-transform：旋转（45度）； }