我正在做一個項目，里面有一顆鉆石。它的形狀是這樣的：但是，您可以單擊邊界框中的任意位置來激活它。這很煩人，因為如果你把很多東西放在一起，它們會激活第一個創建的邊界框，因為它的邊界框與另一個邊界框重疊。我正在尋找一個簡單的函數來改變它的形狀，無論是CSS還是JS，或者類似的解決方法。
1 回答
LEATH
TA貢獻1936條經驗 獲得超7個贊
你需要這樣做clip-path
.box {
width:200px;
height:100px;
display:inline-block;
vertical-align:top;
/* to create the borders*/
background:
linear-gradient(to top left ,transparent 49%,#000 50%) top left,
linear-gradient(to top right,transparent 49%,#000 50%) top right,
linear-gradient(to bottom left ,transparent 49%,#000 50%) bottom left,
linear-gradient(to bottom right,transparent 49%,#000 50%) bottom right;
background-size:calc(50% + 5px) calc(50% + 3px); /* control the border thickness here */
background-repeat:no-repeat;
background-color:red;
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.box:hover {
background-color:yellow;
}
<div class="box"></div>
<div class="box" style="margin:50px 0 0 -100px"></div>
<div class="box" style="margin:0 0 0 -100px"></div>
- 1 回答
- 0 關注
- 107 瀏覽
添加回答
舉報
0/150
提交
取消