HTML：剪切边框边缘

Question

我试图复制图片中的设计

我尝试使用border-radius属性完成它，但无法完全复制它。

Answer 1

您可以使用背景渐变来完成此任务：

.border-red-bottom {
    color: white;
    background: red;
    padding: 10px 10px 40px;
    width: 300px;
    position: relative;
    background: linear-gradient(-3deg, #fff 0%,#fff 40%,#f00 41%,#f00 41%,#f00 100%);
}

<div class="border-red-bottom">Notifications</div>

Answer 2

我认为实现这一目标的最佳方法是使用clip-path。

我已经添加了一个如何工作的示例，但它基本上允许您使用形状隐藏元素的一部分，在本例中为多边形。

您提供多边形的四个点

0 0左上角

右上角

100% 0

100% 48%大约在右手边的一半

左下角

0 100%

＆＃13;

＆＃13;

div {
  background-color: red;
  color: white;
  width:300px;
  height: 40px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 48%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 48%, 0 100%);
  padding:10px 0 0 10px;
}

＆＃13;

<div>test</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

将此添加到您的红色元素：

clip-path: polygon(0 80%, 100% 80%, 100% 93%, 0% 100%);

如果角度不适合您，您可以调整值。