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

Question

我想要上面的结果,不能使用图像,因为div的高度不固定.

任何帮助都会得到满足.

Answer 1

您可以使用pseudo classes&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>