mo49
8/29/2019 - 7:03 AM

00_EquilateralTriangle.md

高さを指定すると正三角形を描画する

http://apps.eky.hk/css-triangle-generator/ja

<template>
  <div :style="{borderWidth: border_width}"></div>
</template>

<script>
export default {
  props: {
    height: Number,
  },
  computed: {
    border_width() {
      return `${this.height/2+'px'} 0 ${this.height/2+'px'} ${Math.floor(this.height/2*Math.sqrt(3))+'px'}`
    },
  }
}
</script>

<style lang="scss" scoped>
div{
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent transparent #ff4d77;
}
</style>