如何用CSS实现元素左右边框倾斜与边框边缘弯曲效果？

需求说明 #

希望实现行列左右边框倾斜的效果，同时为带有.bordr类的元素添加弯曲（圆角）边框边缘（参考效果图显示行列左右边框为倾斜样式，中间目标元素边框为圆角）。

现有代码 #

HTML代码 #

<div class="row">
   <div class="col-1 lft-rht">
      <p>TO</p>
      <p class="text-bottom">IDR</p>
   </div>
   <div class="col-7">
      <div class="spcl">
          <p>By First <br> Career</p>
          <p class="bordr px-5 text-center">Here i need the curved border edges</p>
      </div>
      <p class="text-bottom">6E</p>
   </div>
   <div class="col-1 lft-rht">
      <p>TO</p>
   </div>
   <div class="col-1">
      <p>By</p>
   </div>
   <div class="col-1 lft-rht">
      <p>To</p>
   </div>
   <div class="col-1">
       <p>By</p>
   </div>
</div>

（注：修正原代码中text center的写法为text-center，符合常用样式类名规范）

原有CSS代码 #

/*CSS Part*/

.bordr {
        border: 1px solid black;
      }
.lft-rht{
        border-left: 1px solid black;
        border-right:1px solid black;
      }
.spcl {
      display: flex;
      justify-content: space-evenly;
      align-items: flex-start;
    }
p.text-bottom {
             align-items: flex-end;
             margin-bottom: 0px;
          }

解决方案CSS代码 #

/* 实现行列左右边框倾斜效果 */
.lft-rht {
  position: relative;
  border-left: none;
  border-right: none;
}

.lft-rht::before,
.lft-rht::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: black;
}

.lft-rht::before {
  left: 0;
  transform: skewX(15deg); /* 调整角度数值可改变倾斜程度 */
  transform-origin: top left;
}

.lft-rht::after {
  right: 0;
  transform: skewX(-15deg); /* 调整角度数值可改变倾斜程度 */
  transform-origin: top right;
}

/* 为.bordr添加弯曲边框 */
.bordr {
  border: 1px solid black;
  border-radius: 12px; /* 调整数值控制圆角大小 */
  padding: 0.5rem 1rem; /* 可选：增加内边距优化视觉效果 */
}

/* 保留并优化原有布局样式 */
.spcl {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

p.text-bottom {
  display: flex;
  align-items: flex-end;
  margin-bottom: 0;
  height: 100%; /* 确保元素贴紧容器底部 */
}

/* 确保整体行列布局一致 */
.row {
  display: flex;
  align-items: stretch; /* 让所有列高度统一 */
}

.col-1, .col-7 {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让上下内容分别对齐顶部和底部 */
  padding: 0 0.5rem; /* 可选：避免内容紧贴边框 */
}

关键说明 #

• 倾斜边框：通过伪元素创建边框线条，利用transform: skewX()实现倾斜，调整15deg数值可改变倾斜角度。
• 圆角边框：使用border-radius属性，数值越大边框弯曲程度越高。
• 布局优化：补充flex布局规则，确保列高度一致，内容对齐更贴合设计需求。

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