如何为Div/Image实现带斜角尖端的左侧与底部边框样式

开发者阿泽

2026-8-5

实现Div/Image左侧和底部边框的向内斜角尖端

我想给Div或图片的左侧、底部边框添加向内的斜角尖端样式，但试了两种方案都没达到预期效果，斜角尖端都是向外的：

box-shadow方案：

<div class="container">Text Content or Image</div>

.container {
  background-color: blue;
  padding: 100px;
  box-shadow: -10px 20px 0px 5px #f71e1e;
}

普通border方案：

.container {
  background-color: blue;
  padding: 100px;
  border-bottom: 15px solid #f71e1e;
  border-top: 15px solid white;
  border-left: 15px solid #f71e1e;
  border-right: 15px solid white;
}

解决方案：用伪元素+clip-path实现向内斜角

普通border和box-shadow无法直接实现向内的斜角效果，可通过伪元素配合clip-path属性精准裁剪出斜角样式：

<div class="container">Text Content or Image</div>

.container {
  position: relative;
  background-color: blue;
  padding: 100px;
  /* 为边框预留空间 */
  margin-left: 15px;
  margin-bottom: 15px;
}

/* 左侧边框及底部向内斜角 */
.container::before {
  content: '';
  position: absolute;
  left: -15px;
  top: 0;
  height: 100%;
  width: 15px;
  background-color: #f71e1e;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), 0 100%);
}

/* 底部边框及左侧向内斜角 */
.container::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100%;
  height: 15px;
  background-color: #f71e1e;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 15px 100%);
}