<div>我是一个提示框</div>
<div>我是一个提示框</div>
<div>我是一个提示框</div>
<div>我是一个提示框</div>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

:root {
  --w: 50vh;  // 提示框宽度
  --h: 30vh;  // 提示框高度
  --h1: 4vh;  // 提示框三角形距容器高度
  --w1: 10vh; // 提示框底点1距容器边缘宽度
  --w2: 13vh; // 提示框顶点距容器边缘宽度
  --w3: 16vh; // 提示框底点2距容器边缘宽度
}

div {
  margin: 2vh;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: var(--w);
  height: var(--h);
  background: #f36;
  clip-path: polygon(
    0 0, 
    100% 0, 
    100% calc(100% - var(--h1)),
    calc(100% - var(--w1)) calc(100% - var(--h1)),
    calc(100% - var(--w2)) 100%,
    calc(100% - var(--w3)) calc(100% - var(--h1)),
    0 calc(100% - var(--h1))
  );
    
  &:nth-child(2) {
    background: linear-gradient(90deg, rgba(36,0,35,1) 0%, rgba(121,9,96,1) 49%, rgba(36,0,35,1) 100%);
    clip-path:polygon(
      0 var(--h1),
      var(--w1) var(--h1),
      var(--w2) 0,
      var(--w3) var(--h1),
      100% var(--h1),
      100% 100%,
      0 100%
    );
    padding-top: var(--h1);
  }
  
  &:nth-child(3) {
    clip-path: polygon(
      0 0, 
      calc(100% - var(--h1)) 0,
      calc(100% - var(--h1)) var(--w1),
      100% var(--w2),
      calc(100% - var(--h1)) var(--w3),
      calc(100% - var(--h1)) 100%,
      0 100%
    );
    padding-right: var(--h1);
  }
  
  &:nth-child(4) {
    clip-path: polygon(
      var(--h1) 0,
      100% 0,
      100% 100%,
      var(--h1) 100%,
      var(--h1) calc(100% - var(--w1)),
      0 calc(100% - var(--w2)),
      var(--h1) calc(100% - var(--w3))
    );
    padding-left: var(--h1);
    background: linear-gradient(to bottom, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.