I am working on creating an indicator to identify which bases have a person on them. Utilizing Bootstrap React's Container, Row, and Col for positioning, I have also designed my own CSS classes for the triangles. However, I am facing a challenge in getting them to connect with each other to form a diamond shape for the base. I am open to exploring alternative methods to achieve this.
Current Output
https://i.sstatic.net/EIHC1.png
Desired Output
https://i.sstatic.net/HjC9a.png
My Components Container
<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>
My CSS classes
.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;
}