如何使用CSS在矩形右上角实现三角形轮廓效果？

要把实心三角形改成空心轮廓样式，核心思路是通过两个伪元素叠加：底层用黑色三角形，上层用与矩形（或页面）背景色一致的小三角形，通过尺寸和位置偏移，露出底层三角形的边缘形成轮廓。

修改后的完整代码如下：

.rectangle {
    width: 70px;
    height: 45px;
    border: 1px solid black;
    position: relative;
    background-color: white; /* 需与上层三角形颜色匹配 */
}

.rectangle::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    border-width: 5px;
    border-color: transparent;
    border-style: solid;
    border-top-color: black;
    border-right-color: black;
}

.rectangle::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    border-width: 4px; /* 比底层三角形小1px，形成轮廓宽度 */
    border-color: transparent;
    border-style: solid;
    border-top-color: white; /* 与矩形背景色一致，挖空中间区域 */
    border-right-color: white;
}

<div class='rectangle'></div>

关键细节说明 #

• 若页面背景不是白色，只需将.rectangle::after的border-top-color和border-right-color改为页面背景色，即可适配不同场景。
• 调整border-width的差值可以改变轮廓的粗细，比如底层用6px、上层用4px，就能得到2px粗的轮廓。

内容的提问来源于stack exchange，提问作者jknowlesdev