LEATH
你需要这样做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>