如何只使用 :before 和 :after 偽元素在 CSS 中建立有角的角？

CSS 中的角角：詳細的解決方案

使用純CSS 創建角角是可能的，儘管它帶來了一定的挑戰。為了實現這一點，有必要在有邊框的父容器中使用 :before 和 :after 元素。

1. 新增邊框： 在容器周圍建立邊框容器元素來定義可見邊界。
2. 建立一個 :before 元素來阻擋角落：增加一個 :before 元素，其上邊框樣式以像素為單位指定，以建立一條垂直實線。將此元素偏移 -1 像素以考慮容器的邊框。
3. 新增 :after 元素以建立內線： 引入一個 :after 元素，其偏移量略小於:before 元素。將 :after 元素的 border-top 樣式設定為不同的顏色，例如白色，以在截止區域內建立一條對比線。

雖然此技術接近所需的效果，但它45 度線的粗細可能會帶來一些小問題。

範例程式碼：

.cutCorner {
    position:relative; background-color:blue; 
    border:1px solid silver; display: inline-block;
}

.cutCorner img {
    display:block;
}

.cutCorner:before {
    position:absolute; left:-1px; top:-1px; content:'';
    border-top: 70px solid silver;
    border-right: 70px solid transparent;
}

.cutCorner:after {
    position:absolute; left:-2px; top:-2px; content:'';
    border-top: 70px solid white;
    border-right: 70px solid transparent;
}

<div class="cutCorner">
    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

以上是如何只使用 :before 和 :after 偽元素在 CSS 中建立有角的角？的詳細內容。更多資訊請關注PHP中文網其他相關文章！