html - 用三 Angular 形创建透明的CSS边框

Question

我正在尝试找到一种方法来创建带三 Angular 形的动态边框。目前，有了基本的渐变效果，这就是我所做的:

My current effect in action

但是如您所见，背景有渐变，我们可以看到不匹配的边框背景..

我怎样才能达到这个效果？此外，文本可能因不同的屏幕尺寸和其他文字而有所不同。

谢谢!

Answer 1

使用 pseudo-elements 和 skewX 是实现此目的的一种简洁方法。检查一下，我在元素上使用了上、左和右边框，然后将 before 样式设置为左下边框，将 after 样式设置为右下边框:

body {
  background-color: white;
  background-image: linear-gradient(45deg, #999 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, #999 75%, #999);
  background-size: 10px 10px;
  background-position: 0 0, 50px 50px;
}

.dialog {
  text-align: center;
  color: green;
  font-size: 65px;
  width: 300px;
  height: 120px;
  background-color: transparent;
  border-width: 5px 5px 0 5px;
  border-color: red;
  border-style: solid;
  display: inline-block;
  position: relative;
}
.dialog:before {
  content: '';
  border-top: 5px solid red;
  border-right: 5px solid red;
  transform-origin: left top;
  transform: skewX(45deg);
  position: absolute;
  content: ' ';
  height: 10px;
  width: 46%;
  background: inherit;
  left: -5px;
  bottom: -10px;
}
.dialog:after {
  content: '';
  border-top: 5px solid red;
  border-left: 5px solid red;
  transform-origin: left top;
  transform: skewX(-45deg);
  position: absolute;
  content: ' ';
  height: 10px;
  width: 46%;
  background: inherit;
  right: -5px;
  bottom: -10px;
}

<div class="dialog">Here I am</div>