CSS四個擴散小箭頭怎么寫

在CSS中，可以使用偽元素和CSS3的transform屬性來實現四個擴散小箭頭的樣式，以下是一個簡單的示例代碼：

.arrow-container {
  position: relative;
  width: 100px;
  height: 100px;
}
.arrow-container:before,
.arrow-container:after,
.arrow-container div:before,
.arrow-container div:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.arrow-container:before {
  border-width: 20px 20px 0 20px;
  border-color: #000 #000 #fff #000;
  top: 0;
  left: 50px;
}
.arrow-container:after {
  border-width: 20px 20px 0 20px;
  border-color: #000 #000 #fff #000;
  top: 0;
  right: 50px;
}
.arrow-container div:before {
  border-width: 20px 20px 20px 0;
  border-color: #000 #000 #000 #fff;
  left: 50px;
  bottom: 0;
}
.arrow-container div:after {
  border-width: 20px 20px 20px 0;
  border-color: #000 #000 #000 #fff;
  right: 50px;
  bottom: 0;
}

在這個示例中，我們創(chuàng)建了一個名為.arrow-container的類，它包含四個偽元素，分別代表四個擴散小箭頭，每個偽元素都使用border-style屬性來繪制箭頭的形狀，并通過border-width和border-color屬性來設置箭頭的寬度和顏色，通過調整這些屬性，可以輕松地改變箭頭的樣式和大小。