【css】clip-path、drop-shadow 、border-image 渐变色 结合应用

想要的效果

四边形实现 ： clip-path

 <div class="content">技术中心测试团队</div>

  .content {
   color: #ffffff;      /*文字颜色*/
   width: fit-content;      /*宽度随内容展开*/
   padding: 0 20px 0 10px;     /*内边距*/
   height: 22px;     /*高度*/
   background: #e10220;     /*背景颜色*/
   border-radius: 4px; / *圆角*/
   clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0% 100%);     /*画出四边形*/
 }

效果

注意点： clip-path 里面用calc才不会导致不同宽度下裁剪出来的形状不同
可以优化的地方： border-radius 有点形变

矩形右侧阴影实现 drop-shadow

<div class="wrap">
    <div class="content">技术中心测试团队</div>
  </div>

 .wrap {
    margin-right: 20px;
    filter: drop-shadow(14px 0px 0px #ff5900) drop-shadow(14px 0px 0px orange);
  }

效果

注意点： wrap 一定要包裹在 content 外面， 如果直接在 content 里面写 drop-shadow 不起作用

右侧文字下方边框渐变实现

  <div class="border"></div>

 .border {
    width: 100px;
    padding-left: 50px;
    color: orange;
    /*首先我们设置边框只显示底部，宽度为2px的实线。*/
    border-bottom: 2px solid;
    /*设置线性渐变*/
    border-image: linear-gradient(
        89deg,
        rgb(255, 158, 73) 30%,
        rgb(255, 249, 244) 70%
      )
      2 2 2 2;
  }

效果

最终效果

最终代码

<div class="box">
  <div class="wrap">
    <div class="content">技术中心测试团队</div>
  </div>
  <div class="border"></div>
  <div class="text">交映交维标准流程checklist</div>
</div>

<div class="box">
  <div class="one">
    <div class="wrap">
      <div class="content">大数据及ai技术产品线</div>
    </div>
  </div>
  <div class="border"></div>
  <div class="text">交映交维标准流程</div>
</div>

<style>
  .box {
    display: flex;
    margin-top: 20px;
  }
  .wrap {
    margin-right: 20px;
    filter: drop-shadow(14px 0px 0px #ff5900) drop-shadow(14px 0px 0px orange);
  }
  .content {
    color: #ffffff;
    width: fit-content;
    padding: 0 20px 0 10px;
    height: 22px;
    background: #e10220;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0% 100%);
    border-radius: 4px;
  }
  .border {
    width: 100px;
    padding-left: 50px;
    color: orange;
    /*首先我们设置边框只显示底部，宽度为2px的实线。*/
    border-bottom: 2px solid;
    /*设置线性渐变*/
    border-image: linear-gradient(
        89deg,
        rgb(255, 158, 73) 30%,
        rgb(255, 249, 244) 70%
      )
      2 2 2 2;
  }
  .text {
    margin-left: -113px;
    color: orange;
  }
</style>