Question

是否可以创建类似于此的响应边框？

http://tinypic.com/view.php?pic=qyzrys&s=5

我已尝试过边框图像技术，但这会将png填充为白色，因为边框放在div中。我也尝试将div水平放置到底层div但是很难用％+知道确切的宽度填充/利润率。

任何有关实现这一目标的帮助/想法都会受到赞赏吗？

Answer 1

边框图像覆盖在元素的顶部，因此即使边框图像是透明的，它仍然会显示其背后元素的颜色。

纯CSS解决方案是使用伪元素。

首先将div的位置设置为非静态（相对，绝对或固定将起作用）。然后使你的元素绝对并跨越div的宽度：

div:before {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 100%;
  height: 10px;
  background: url(http://i.imgur.com/PEY43VD.png);
}

这将考虑你的div的宽度/填充。

看到这个小提琴：http://jsfiddle.net/jDau2/

Answer 2

您可以使用具有透明背景的png图像中的border-image而不是渐变。 http://codepen.io/anon/pen/iFJpH

html {background:lightgray;}
div {margin:5em;min-height:5em;background:white;border-style: solid;
border-width: 40px 10px 0px;
-moz-border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;
-webkit-border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;
-o-border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;
border-image: url(http://oi44.tinypic.com/qyzrys.jpg) 34 18 1 29 repeat;

甚至使用在线工具：http://border-image.com/

响应？要调整它的最后一件事，
它是通过mediaqueries设置不同的最大宽度因此，当窗口减小宽度时，三角形不会被切片。您也可以设置border-size来增大或减少三角形。他们会拉伸

Answer 3

我认为，（我有）两种解决方案适合你。 1.在这种情况下，没有任何东西让你的边界div与你的页面颜色相同，你可以让它透明。 2.如果第一种解决方案对您不方便，请尝试：

For the css:

div
{
  border:15px solid transparent;
  width:500px;  //As you want
  background-color: rgba(255,255,255,0);  //No padding here ;)
}
#NiceBorder
{
 -webkit-border-image: url(border.png) 30 30 round;
 -o-border-image: url(border.png) 30 30 round;
 border-image: url(border.png) 30 30 round;
}


For the html:

<div id="NiceBorder" style="margin: 0 ; width: auto;">
     <div style="margin: auto ; width: auto; background-color: #000;">
        Here, you can put some background-color as you want and that's it.
        I hope I've helped you.  
     </div>
</div>

Lionnel。

CSS自定义边框

3 个答案: