所以我想將一個div的鼠標事件限制為菱形，并使用clip-path: polygon(50% 0，100% 50%，50% 100%，0 50%)技術(shù)上做到了這一點，但它也剪輯了子元素，其中包括發(fā)光。

使用overflow: visible不做任何事情。

我還應該提到，我不能使用JS，因為我正在為fandom wiki編輯樣式。此外，剪輯路徑渲染preserve-3d無用，所以這也是一個問題。

https://jsfiddle.net/z9fknajt/

我的代碼:

CSS:

@import url('https://fonts.googleapis.com/css2?family=Amarante&display=swap');


#crystal__ #crystal-side{
  width:100%;
  height:53%;
  background-image:url(https://i.ibb.co/tYncDJ8/image.png);
  position:absolute;
  background-size: 100% 100%;
  /*
  
  background-image:url(https://i.ibb.co/Pzw7LSR/image.png);
  position:absolute;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 30px rgb(255,150,50)) hue-rotate(180deg);
  */
}
#crystal__ #crystal-side:nth-of-type(1){
  transform:translateZ(.825em) translateY(-.15em) rotateX(18.4deg);
}
#crystal__ #crystal-side:nth-of-type(2){
  transform:rotateY(90deg) translateZ(.825em) translateY(-.15em) rotateX(18.4deg) rotateY(180deg);
}
#crystal__ #crystal-side:nth-of-type(3){
  transform:rotateY(-90deg) translateZ(.825em) translateY(-.15em) rotateX(18.4deg);
}
#crystal__ #crystal-side:nth-of-type(4){
  transform:rotateY(180deg) translateZ(.825em) translateY(-.15em) rotateX(18.4deg);
}
#crystal__ #crystal-side:nth-of-type(5){
  transform:rotateX(180deg) translateY(-5em) translateZ(.825em) translateY(.15em) rotateX(18.4deg);
}
#crystal__ #crystal-side:nth-of-type(6){
  transform:rotateY(90deg) rotateX(180deg) translateY(-5em) translateZ(.825em) translateY(.15em) rotateX(18.4deg);
}
#crystal__ #crystal-side:nth-of-type(7){
  transform:rotateY(-90deg) rotateX(180deg) translateY(-5em) translateZ(.825em) translateY(.15em) rotateX(18.4deg);
}
#crystal__ #crystal-side:nth-of-type(8){
  transform:rotateY(180deg) rotateX(180deg) translateY(-5em) translateZ(.825em) translateY(.15em) rotateX(18.4deg);
}
#crystal__{
  transform-style: preserve-3d;
  width:66%;
  left:16.5%;
  transform-origin:center;
  height:100%;
  position:absolute;
  animation: crystal 10s linear infinite;
  
}
@keyframes crystal{
  from{
  transform:rotateX(calc(-30deg*var(--crroin))) rotateY(calc(0deg*var(--crroin)));
  }
  to{
  transform:rotateX(calc(-30deg*var(--crroin))) rotateY(calc(360deg*var(--crroin)));
  }
}
@property --crroin {
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 1;
  inherits: false;
}
#crystal-container{
  border-style:solid;
  width:5em;
  margin-left:1em;
  margin-right:1em;
  transform-style: preserve-3d;
  height:10em;
  float:left;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
#crystal-glow{
  width:100%;
  height:100%;
  transform:translateZ(-5em) scale(1.2);
  background-image:url(https://i.ibb.co/GF64XLK/qgwas.png);
  background-size:100% 100%
}
#crystal-text{
  border-style:solid;
  border-color:black;
  position:absolute;
  margin:auto;
  top:50%;
  transform:translateY(-50%) translateZ(1em);
  width:100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size:2em;
  color:white;
  text-shadow: 0 0 10px rgb(0,0,0);
    font-family:Amarante;
  transition:transform .3s;
}
body{
  font-size:50px
}
#crystal-container:hover > #crystal-text{
    transform:translateY(-50%) translateZ(1em) rotateX(30deg) rotateY(-24deg);
}
#crystal-container:hover > #crystal__{
    transform:rotateY(40deg)
}
#crystal-rack{
  float:none
}

HTML:

<div id="crystal-rack">
<div id="crystal-container">
<div id="crystal__">
  <div id="crystal-side"></div>
  <div id="crystal-side"></div>
  <div id="crystal-side"></div>
  <div id="crystal-side"></div>
  <div id="crystal-side"></div>
  <div id="crystal-side"></div>
  <div id="crystal-side"></div>
  <div id="crystal-side"></div>
</div>
<div id="crystal-glow"></div>
<div id="crystal-text">Places</div>
</div>
</div>