Vue

by ken3desu

HTML

<div id="app">
    <div
      :style="styleVariables"
      class="check-box"
    >
      <div class="check"/>
  </div>
</div>

SCSS

.check-box {
    border: 2px solid #9e9e9e;
    border-radius: 2px;
    width: var(--checkbox-width);
    min-height: var(--checkbox-width);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .check{
    position: relative;
    top: calc(var(--checkbox-width) / 6);
    left: calc(var(--checkbox-width) / -20);
    transform: rotate(-45deg);
    transform-origin: left top;
    border-left: 2px solid #000;
    border-bottom: 2px solid #000;
    width: calc(var(--checkbox-width) / 2.4 * 1.618);
    height: calc(var(--checkbox-width) / 2.4);
  }

Vue

new Vue({
  el: "#app",
  props: {
    checkboxWidth: {
      type: String,
      default: '3em',
    },
  },
  computed: {
    /**
     * このコンポーネント中で用いるCSS変数をまとめる.
     * @return {object}
     */
    styleVariables() {
      return {
        '--checkbox-width': this.checkboxWidth,
      };
    },
  },
})