html - 如何在 CSS3 的边框中使用渐变？

Question

我想要上面的结果，不能使用图片，因为div的高度不固定。

我们将不胜感激。

Answer 1

您可以使用伪类 & gredient background 来创建它。检查下面更新的代码段 ...

.msgBox {
  padding: 3px;
  background: #f9db31;
  background: -webkit-linear-gradient(#f9db31 0%, #ff0000 100%);
  background: -moz-linear-gradient(#f9db31 0%, #ff0000 100%);
  background: -o-linear-gradient(#f9db31 0%, #ff0000 100%);
  background: linear-gradient(#f9db31 0%, #ff0000 100%);
  float: left;
  margin: 50px;
  position: relative;
  border-radius: 5px;
}
.msgBox::before {
  border-bottom: 30px solid transparent;
  border-right: 30px solid #f9db31;
  border-top: 0 solid transparent;
  content: "";
  height: 0;
  left: -27px;
  position: absolute;
  top: 25px;
  width: 0;
  z-index: 999;
}
.msgBox::after {
  border-bottom: 28px solid transparent;
  border-right: 28px solid #fff;
  border-top: 0 solid transparent;
  content: "";
  height: 0;
  left: -21px;
  position: absolute;
  top: 27px;
  width: 0;
  z-index: 999;
}
.innerBox {
  width: 400px;
  min-height: 200px;
  background: #fff;
  border-radius: 5px;
}

<div class="msgBox">
<div class="innerBox">

</div>
</div>