html - 使用 CSS 自定义边框

Question

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

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

我已经尝试过边框图像技术，但是当边框放置在 div 内时，这会用白色填充 png .

任何关于实现这一目标的帮助/想法将不胜感激？

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 图像中的边框图像而不是渐变。 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/

反应灵敏？调整它的最后一件事
是通过媒体查询设置不同的最大宽度，
因此当窗口减小宽度时三角形不会被切片。您也可以设置边框大小来增大或减小三角形。他们会伸展

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>

莱昂内尔。