Question

我试图找到一种方法来获得带有三角形的动态边框。目前，基本的渐变效果，这就是我所做的：

但是正如你所看到的，背景有一个渐变，我们可以看到不匹配的边框背景。

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

谢谢！

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设为右边边框：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

用三角形创建透明的CSS边框

2 个答案: