长方形边框上方中间有缺口 css

5335ld

于 2024-05-29 17:24:34 发布

阅读量368

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/u014722196/article/details/139301399

版权

<div class="text_6">大234234师掌4234柜</div>
        <div class="text-wrapper_1">
          <span class="paragraph_1">
            四川慧创云戈科技有限公司推出的“大师掌柜”，是一个以餐饮外卖为切入口，专注实体小店新零售信息化、外卖新零售管理的SaaS平台。面向餐饮、

            零售等小微生活服务商家，提供软硬一体、云端结合的SaaS整体解决方案。
          </span>
        </div>

.text-wrapper_1 {
    padding: 3%;
    width:100%;
    height:300px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: SourceHanSansCN-Regular;
    font-weight: 800;
    text-align: left;
    line-height: 44px;
    position: relative;
    overflow: hidden; /* 防止内容溢出边框 */
    box-sizing: border-box; /* 包括边框和内边距在内的总宽度和高度 */
    border:3px solid #fff;
    clip-path: polygon(
      0 0,                     /* 左上角 */
      40% 4px,   /* 左侧裁剪开始点，假设要裁剪的宽度是85px */
      60% 4px,   /* 左侧裁剪结束点 */
      100% 0,                 /* 右上角 */
      100% 100%,              /* 右下角 */
      0 100%                  /* 左下角，闭合多边形 */
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .text_6 {
   
    color: rgba(255, 255, 255, 1);
    font-size: 2.3rem;
    font-family: SourceHanSansCN-Medium;
    font-weight: 500;
    white-space: nowrap;
    margin: 0; /* 移除任何默认的边距 */
  }