【发布时间】：2021-08-30 13:19:19
【问题描述】：
我正在尝试创建一个指标，以指示哪些基地上有一个人。我正在使用 bootstrap react 的 Container、Row 和 Col 进行定位，并为三角形创建了自己的 CSS 类。但我遇到的问题是我不知道如何让它们相互接触，从而为底座的形状制作钻石。我也愿意接受任何其他方式。
电流输出
期望的输出
我的组件容器
<Container>
<Row>
<Col sm="auto">
<div className="triangle-blank"></div>
<div className="triangle-left"></div>
</Col>
<Col sm="auto">
<div className="triangle-left"></div>
<div className="triangle-right"></div>
</Col>
<Col sm="auto">
<div className="triangle-right"></div>
<div className="triangle-left"></div>
</Col>
<Col sm="auto">
<div className="triangle-blank"></div>
<div className="triangle-right"></div>
</Col>
</Row>
</Container>
我的 CSS 类
.triangle-left {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 25px solid #555;
border-bottom: 20px solid transparent;
}
.triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 25px solid #555;
border-bottom: 20px solid transparent;
}
.triangle-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 25px solid #555;
}
.triangle-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 25px solid #555;
}
.triangle-blank {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 25px solid transparent;
border-bottom: 20px solid transparent;
}
【问题讨论】：
-
请问您可以使用minimal reproducible example 编辑问题吗？当前的示例没有提供足够的信息来说明为什么要获得该输出
-
我还能添加什么。我给出了该图所需的代码。除了样板反应组件布局和导入 {Container, Row, Col) from "react-bootstrap; 我在描述中说明了所有这些你想让我给你渲染页面所需的基本反应肉鸡板外，没有别的了?
-
一个使用引导程序的示例，让我们运行它，这样我们就可以在没有图像的情况下自己查看输出？
-
刚刚添加了一个 CodeSandbox 链接
标签： javascript html css reactjs react-bootstrap