如何仅使用 :before 和 :after 伪元素在 CSS 中创建有角的角？-css教程-PHP中文网

如何仅使用 :before 和 :after 伪元素在 CSS 中创建有角的角？

Linda Hamilton

发布： 2024-11-27 12:10:10

原创

533 人浏览过

How Can I Create Angled Corners in CSS Using Only :before and :after Pseudo-elements?

CSS 中的角角：详细的解决方案

使用纯 CSS 创建角角是可能的，尽管它带来了一定的挑战。为了实现这一点，有必要在有边框的父容器中使用 :before 和 :after 元素。

向容器添加边框： 在容器周围建立边框容器元素来定义可见边界。
创建一个 :before 元素来阻挡角落：添加一个 :before 元素，其上边框样式以像素为单位指定，以创建一条垂直实线。将此元素偏移 -1 像素以考虑容器的边框。
添加 :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中文网其他相关文章！