如何用CSS为Div绘制带单个折角（Dog Eared）的实线边框？

当然可以用纯CSS实现！而且完全不用依赖clip-path（毕竟它对边框的支持确实拉胯），还能保证div内部的文本、图片等内容正常显示和排版。我给你分享一个简单靠谱的方案：

核心思路 #

用div本身的边框作为基础框架，通过伪元素模拟折角效果——伪元素会覆盖掉原边框的角落，同时和原边框样式保持统一，既不破坏布局，也不遮挡内部内容。

完整代码示例 #

先看HTML结构，就是个普通的div，随便塞内容就行：

<div class="dog-eared-box">
  <h3>折角边框示例</h3>
  <p>这里可以放任意文本、图片，甚至嵌套其他元素~</p>
  <img src="your-image-url.jpg" alt="示例图片" style="max-width:100%;">
</div>

然后是CSS部分，我以右上角折角为例：

.dog-eared-box {
  position: relative;
  width: 350px; /* 可以根据需求调整宽度 */
  padding: 2rem;
  padding-right: calc(2rem + 25px); /* 给折角预留空间，避免内容被挡 */
  border: 2px solid #2d3748; /* 基础边框样式 */
  background: #fff; /* 盒子背景色，和页面背景一致即可 */
}

.dog-eared-box::after {
  content: '';
  position: absolute;
  top: -2px; /* 和边框宽度一致，对齐顶部边框 */
  right: -2px; /* 和边框宽度一致，对齐右侧边框 */
  width: 25px; /* 折角大小，按需调整 */
  height: 25px;
  background: #fff; /* 和盒子背景色保持一致，盖住原边框角落 */
  border-left: 2px solid #2d3748; /* 折角的两条边，和原边框同色 */
  border-bottom: 2px solid #2d3748;
  transform: rotate(45deg); /* 旋转成折角形状 */
  z-index: -1; /* 让折角在盒子内容下方，不遮挡文本图片 */
}

灵活调整技巧 #

• 换折角位置：比如要做左下角折角，只需要修改伪元素的定位和边框方向：

  .dog-eared-box::after {
    bottom: -2px;
    left: -2px;
    transform: rotate(-45deg);
    border-left: none;
    border-bottom: none;
    border-right: 2px solid #2d3748;
    border-top: 2px solid #2d3748;
  }
  

• 修改样式：调整边框颜色、宽度时，同步修改伪元素的border属性就行；折角大小直接改width和height。
• 适配复杂背景：如果页面背景不是纯色，你可以把伪元素的background换成linear-gradient或者用clip-path裁剪，不过大部分场景下纯色背景的方案已经够用了。

这个方案的好处是兼容性好（几乎支持所有现代浏览器），而且完全不影响内部内容的正常使用，放心用就行~

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