css3画立体图形

一，效果

二，代码

<template>
  <div id="app">
    <div>
      <div class="yuanzhui">
        <div></div>
      </div>
    </div>
    <div class="cube">
      <div class="side front"></div>
      <div class="side back"></div>
      <div class="side right"></div>
      <div class="side left"></div>
      <div class="side top"></div>
    </div>

    <div class="cube2">
      <div class="side front"></div>
      <div class="side back"></div>
      <div class="side right"></div>
      <div class="side left"></div>
      <div class="side top"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.yuanzhui {
  margin: auto;
  position: relative;
  width: 200px;
  height: 300px;
  // background: red;
  &::before {
    position: absolute;
    content: "";
    left: 0px;
    width: 0;
    height: 0;
    border-bottom: 120px solid rgba(255, 103, 116, 0.8);
    border-left: 100px solid transparent;
    border-top: 170px solid transparent;
    transform: skewY(10deg);
    filter: drop-shadow(3px 3px 5px rgba(241, 198, 241, 0.5));
  }
  &:after {
    position: absolute;
    content: "";
    right: 0px;
    width: 0;
    height: 0;
    border-bottom: 120px solid rgba(255, 103, 116, 0.8);
    border-right: 100px solid transparent;
    border-top: 170px solid transparent;
    transform: skewY(-10deg);
    filter: drop-shadow(6px 6px 5px rgba(241, 198, 241, 0.5));
  }
  div {
    position: absolute;
    bottom: 2px;
    left: 98px;
    width: 4px;
    height: 120px;
    background: #fff;
    z-index: 9;
    opacity: 0.3;
    box-shadow: 0px -2px 4px 1px #fff;
  }
}

.cube {
  position: relative;
  top: 30px;
  width: 400px;
  height: 5px;
  // background: red;
  margin: auto;
  transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(45deg);
  transform-origin: center;
  height: 2px;
  .side {
    position: absolute;
    width: 200px;
    height: 200px;
    background: transparent;
    // border: 1px solid rgba(0, 0, 0, 0.5);
    color: white;
  }
  .front {
    transform-origin: top;
    transform: translateZ(100px) rotateX(30deg);
    width: 200px;
    height: 0;
    border-bottom: 200px solid rgba(247, 67, 226, 0.8);
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  }
  .top {
    transform: rotateX(90deg) translateZ(100px) translateX(100px);
    background: rgba(247, 67, 226, 0.8);
  }
  .left {
    transform-origin: top;
    transform: translateX(-100px) rotateY(-90deg) rotateX(30deg);
    width: 200px;
    height: 0;
    border-bottom: 200px solid rgba(247, 67, 226, 0.8);
    border-top: 0 solid transparent;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  }
  .right {
    transform-origin: top;
    transform: translateX(100px) rotateY(90deg) rotateX(30deg);
    width: 200px;
    height: 0;
    border-bottom: 200px solid rgba(247, 67, 226, 0.8);
    border-top: 0 solid transparent;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  }
  .back {
    transform-origin: top;
    transform: translateZ(-100px) rotateX(-30deg);
    width: 200px;
    height: 0;
    border-bottom: 200px solid rgba(247, 67, 226, 0.8);
    border-top: 0 solid transparent;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  }
}

.cube2 {
  position: relative;
  top: 300px;
  width: 800px;
  height: 5px;
  margin: auto;
  transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(45deg);
  transform-origin: center;
  .side {
    position: absolute;
    width: 400px;
    height: 400px;
    background: transparent;
    // border: 1px solid rgba(0, 0, 0, 0.5);
    color: white;
  }
  .front {
    transform-origin: top;
    transform: translateZ(200px) rotateX(30deg);
    width: 400px;
    height: 0;
    border-bottom: 400px solid rgba(30, 119, 252, 0.8);
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  }
  .top {
    transform: rotateX(90deg) translateZ(100px) translateX(200px);
    background: rgba(15, 89, 201, 0.8);
  }
  .left {
    transform-origin: top;
    transform: translateX(-200px) rotateY(-90deg) rotateX(30deg);
    width: 400px;
    height: 0;
    border-bottom: 400px solid rgba(30, 119, 252, 0.8);
    border-top: 0 solid transparent;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  }
  .right {
    transform-origin: top;
    transform: translateX(200px) rotateY(90deg) rotateX(30deg);
    width: 400px;
    height: 0;
    border-bottom: 400px solid rgba(30, 119, 252, 0.8);
    border-top: 0 solid transparent;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  }
  .back {
    transform-origin: top;
    transform: translateZ(-200px) rotateX(-30deg);
    width: 400px;
    height: 0;
    border-bottom: 400px solid rgba(30, 119, 252, 0.8);
    border-top: 0 solid transparent;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
    filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
  }
}
</style>