用三角形创建透明 css 边框

Question

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

My current effect in action

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

如何实现这种效果？此外，文本可能因屏幕尺寸和其他文字而异。

谢谢！

Answer 1

为此，您可以使用背景图片制作它，例如 http://bootsnipp.com/snippets/featured/carousel-reviews-with-rating。

正如你所看到的，他拍摄了一张图片并调整了它的大小，只拍了一个像这样的三角形：

.sprite-i-triangle {
background-position: 0 -1298px;
height: 44px;
width: 50px;
}

尝试找到符合您期望的图像。否则你在这个网站上有一些例子。 (http://bootsnipp.com)

Answer 2

使用 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>

用三角形创建透明 css 边框

Create transparent css border with triangle

html

css

image

border