需要帮助创建基本的棒球基地图

Question

我正在尝试创建一个指示器，根据该指示器，基地上有人。我正在使用 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;
}

CodeSandbox Link

Answer 1

SVG 可以工作吗？

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0  640 200" preserveAspectRatio="xMinYMin meet">
   <rect id="svgEditorBackground" x="0" y="0" width="640" height="200" style="fill: none; stroke: none;" />
   <g id="e4__group">
      <path d="M-35.815383,-37.476921l-4,4l4,4l4,-4Z" style="fill:white; stroke:black; vector-effect:non-scaling-stroke;stroke-width:1px;" id="e1_shape" transform="matrix(8.13356 0 0 8.13356 372.893 316.834)" />
      <path d="M-40.492315,-32.676928l-4,4l4,4l4,-4Z" style="fill:white; stroke:black; vector-effect:non-scaling-stroke;stroke-width:1px;" id="e4_shape" transform="matrix(8.13356 0 0 8.13356 372.893 316.834)" />
      <path d="M-31.138467,-32.800005l-4,4l4,4l4,-4Z" style="fill:white; stroke:black; vector-effect:non-scaling-stroke;stroke-width:1px;" id="e2_shape" transform="matrix(8.13356 0 0 8.13356 372.893 316.834)" />
   </g>
</svg>

Answer 2

这是使用 react-bootstrap 和自定义 CSS

的正确解决方案

在我的 React Component 的 render() 中

const styles = {
    grid: {
        paddingLeft: 0,
        paddingRight: 0,
    },
    row: {
        marginLeft: 3,
        marginRight: 0,
    },
    col: {
        paddingLeft: 0,
        paddingRight: 0,
    },
    center: {
        paddingLeft: 0,
        paddingRight: 0,
    },
};

<Container style={styles.grid}>
    <Row style={styles.row}>
        <Col sm="auto" style={styles.col}>
            <div className="diamond second-base active"></div>
        </Col>
    </Row>
    <Row style={styles.col}>
        <Col sm="auto" style={styles.center}>
            <div className="diamond third-base"></div>
        </Col>
        <Col sm="auto" style={styles.col}>
            <div className="diamond first-base"></div>
        </Col>
    </Row>
</Container>

CSS 类

div.diamond.second-base {
  border: 13px solid transparent;
  border-bottom: 13px solid #CBCCCE;
  box-sizing: border-box;
  clear: both;
  color: #6C6D6F;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0 auto;
  padding: 0;
  position: relative;
  top: -2px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.second-base:after {
  border: 13px solid transparent;
  border-top: 13px solid #CBCCCE;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

div.diamond.second-base.active {
  border: 13px solid transparent;
  border-bottom: 13px solid #0066CC;
  box-sizing: border-box;
  clear: both;
  color: #6C6D6F;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0 auto;
  padding: 0;
  position: relative;
  top: -2px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.second-base.active:after {
  border: 13px solid transparent;
  border-top: 13px solid #0066CC;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

div.diamond.third-base {
  border: 13px solid transparent;
  border-bottom: 13px solid #CBCCCE;
  box-sizing: border-box;
  color: #6C6D6F;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0 4px 0 0;
  padding: 0;
  position: relative;
  top: -13px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.third-base:after {
  border: 13px solid transparent;
  border-top: 13px solid #CBCCCE;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

div.diamond.third-base.active {
  border: 13px solid transparent;
  border-bottom: 13px solid #0066CC;
  box-sizing: border-box;
  color: #6C6D6F;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0 4px 0 0;
  padding: 0;
  position: relative;
  top: -13px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.third-base.active:after {
  border: 13px solid transparent;
  border-top: 13px solid #0066CC;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

div.diamond.first-base {
  border: 13px solid transparent;
  border-bottom: 13px solid #CBCCCE;
  box-sizing: border-box;
  color: #6C6D6F;
  float: right;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0;
  padding: 0;
  position: relative;
  top: -13px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.first-base:after {
  border: 13px solid transparent;
  border-top: 13px solid #CBCCCE;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

div.diamond.first-base.active {
  border: 13px solid transparent;
  border-bottom: 13px solid #0066CC;
  box-sizing: border-box;
  color: #6C6D6F;
  float: right;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0;
  padding: 0;
  position: relative;
  top: -13px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.first-base.active:after {
  border: 13px solid transparent;
  border-top: 13px solid #0066CC;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

解决方案link:codeSandBox

需要帮助创建基本的棒球基地图

Need help creating basic baseball bases figure

html

javascript

css

reactjs

react-bootstrap