三角形里面包裹一个勾css

最新推荐文章于 2023-09-27 18:15:05 发布

原创最新推荐文章于 2023-09-27 18:15:05 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用CSS绝对定位和伪元素(:before和:after)来创建特殊视觉效果的方法，通过具体代码示例展示了如何在div元素上添加红色边框和特定角度的线条，适用于前端开发人员学习和应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图：

.div {
    position: absolute;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border: 1px solid red;
    box-sizing: border-box;
}

.active:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-top: 13px solid red;
    border-left: 15px solid transparent;
}

.active:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 2px;
    background: transparent;
    top: 2px;
    right: 0px;
    border: 1px solid white;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    transform: rotate(-35deg);
    z-index: 9;
}