CSS 獲取交點是一種通過 CSS 實現兩個形狀（一般是矩形）交集的效果，通過這種效果能夠實現很多 CSS 動畫效果，下面來看一下如何使用 CSS 獲取交點。

.shape1 {
position: absolute;
width: 200px;
height: 200px;
border: 1px solid black;
}
.shape2 {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
border: 1px solid black;
}
.shape1 {
clip-path: polygon(0 0, 200px 0, 200px 200px, 0 200px);
}
.shape2 {
clip-path: polygon(0 0, 200px 0, 200px 200px, 0 200px);
}

上述代碼中，我們首先定義了兩個矩形，即shape1和shape2。為了實現交集效果，我們使用 clip-path 屬性，將兩個形狀剪切為一個空心矩形。注意，shape2使用left: 50%和transform: translateX(-50%)屬性將其居中于網頁。

接下來，我們需要將兩個形狀合并為一個交點，實現方法如下：

.shape1 {
clip-path: polygon(0 0, 200px 0, 200px 200px, 0 200px);
}
.shape2 {
clip-path: polygon(100px 100px, 300px 100px, 300px 300px, 100px 300px);
}

上述代碼中，我們將shape2給定了一個新的 clip-path，它定義的是一個與空心矩形相交的實心矩形，通過這種方式就實現了兩個形狀之間的交集效果。

需要注意的是，雖然使用 clip-path 能夠實現很多動畫效果，但是它并不被所有的瀏覽器支持，因此在實際應用中需要考慮瀏覽器的兼容性問題。