如何使用 CSS 創建角落並保持邊框？

使用 CSS 創建斜角

許多人努力使用 CSS 實現複雜的設計，而創建斜角就是其中之一。人們可能想知道在這樣的形狀內剪輯影像是否可行，類似於使用同時保留灰色邊框的遮罩。

人們可以考慮使用畫布或 SVG 來完成此任務。但是，透過在父容器中使用 :before 和 :after 元素，可以使用純 CSS 來實現類似的效果。

首先，為父容器指定邊框。然後，加入一個 :before 元素來遮蔽一個角落並將其偏移 -1px 以覆蓋邊框。最後，引入一個與 :before 稍有偏移的 :after 元素，以建立截止的內線。

儘管採用了這種方法，但保持 45 度線的厚度仍然是一個小小的挑戰。

考慮以下 CSS 和 HTML 程式碼：

.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>

這種方法近似於所需的角度角落，同時保留邊界。

以上是如何使用 CSS 創建角落並保持邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！