html - 如何创建带有倾斜边缘的盒子？

我正试着做一个有斜边的盒子，但我似乎做不到。
这就是我想要得到的：

这是彩色（非固体）背景。
当前CSS：

        .infotop {
            display: inline-block;
            min-width: 30%;
            min-height: 10%;
            max-width: 50%;
            margin: auto;
            background-color: rgba(0, 190, 190, 0.6);
            color: white;
            text-align: center;
            padding: 10px;
            padding-left: 30px;
            padding-right: 30px;
            box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2), 0 16px 60px 0 rgba(0, 0, 0, 0.19);
            text-shadow: 2px 2px 4px #000000;
        }

最佳答案

使用渐变创建：

.box {
  display:inline-block;
  padding:5px 30px;
  font-size:25px;
  color:#fff;
  background:
   linear-gradient(blue,blue) center/calc(100% - 40px) 100% no-repeat,
   linear-gradient(to bottom left,blue 49%,transparent 50.5%) left/20px 100% no-repeat,
   linear-gradient(to bottom right,blue 49%,transparent 50.5%) right/20px 100% no-repeat;
}

body {
  background:pink;
}

<div class="box">
 some text
</div>

这里有另一种方法clip-path

.box {
  display:inline-block;
  padding:5px 30px;
  font-size:25px;
  color:#fff;
  background:blue;
  -webkit-clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 20px 100%);
}

body {
  background:pink;
}

<div class="box">
 some text
</div>