透明背景上的图标和元素部分边框

Question

如何在透明背景下在图标和页面上的其他元素（如下所示）上创建可调整大小（或甚至设置宽度）的边框？

------[element]------ 

思维

最好的线是目前

<div class="outer"> Border left/right 
    outer:before - Border top/ bottom; width:10% 
    Element 
    outer:after- Border top/ bottom; width:10% 
</div> 

但我怎么纳入水平线醚侧涵盖整个中段

Answer 1

老实说，我喜欢不使用任何图像的完整CSS，我会在图标的左侧和右侧使用2个额外的div元素，它充当“支架”

<div class="icon-container"> 
    <div class="icon-border icon-border-left"></div> 
    <i class="fa fa-rocket"></i> <!-- or your central element --> 
    <div class="icon-border icon-border-right"></div> 
</div> 

我风格的方括号在这样的传统方式：

.icon-container .icon-border { 
    border: 1px solid black; 
    width: 25px; 
    position: relative; 
} 

然后伪元素应用到支架，以创建“线”，定位绝对具有很长的宽度。

.icon-container .icon-border:before { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    height: 1px; 
    width: 2048px; 
    background: black; 
} 

最后，适用所有的异常靠拢括号的图标，给错觉它包裹起来，然后给左边和右边的伪类，以吸取的一条线支架直到屏幕年底结束：

.icon-container .icon-border.icon-border-left { 
    border-right-width: 0px; 
    margin-right: -21px; 
} 
.icon-container .icon-border.icon-border-left:before { 
    right: 100%; 
} 
.icon-container .icon-border.icon-border-right { 
    border-left-width: 0px; 
    margin-left: -21px; 
} 
.icon-container .icon-border.icon-border-right:before { 
    left: 100%; 
} 

最后关键的东西，你的主图标容器必须有overflow: hidden否则你的行会在整个屏幕上跨越，大概走出去的容器和外出导致你的身体在一个非常可怕的水平滚动条。

演示：http://codepen.io/luigimannoni/pen/epPBXJ

Answer 2

对于这个地平线您可以使用带有repeat-x和位置左中心的background-image属性。对于这些括号，您可以采用：before和之后：带DIV元素的伪类完全位于按钮元素两侧，高度为100％，宽度为20px。这只是我首先想到的几个解决方案之一:)

Answer 3

这应该让你在正确的方向前进。

<div class="wrapper"> 
    <div class="left"></div> 
     <button>Test</button> 
    <div class="right"></div> 
</div> 

<style> 
.wrapper { 
    text-align: center; 
    background: #ccc; 
    padding: 20px; 
} 

button { 
    vertical-align: middle; 
    display: inline-block; 
    position: relative; 
    z-index: 2; 
} 

.left { 
    position: relative; 
    vertical-align: middle; 
    height: 100px; 
    box-sizing: border-box; 
    padding-right: 30px; 
    width: 400px; 
    display: inline-block; 
    margin: 0 -10px 0 0; 
} 

.left::before { 
    position: absolute; 
    border-top: 1px solid #333; 
    top: 50%; 
    z-index: 1; 
    width: 100%; 
    content: ""; 
    right: 30px; 
} 

.left::after { 
    position: absolute; 
    border-top: 1px solid #333; 
    border-left: 1px solid #333; 
    border-bottom: 1px solid #333; 
    top: 0; 
    z-index: 1; 
    width: 30px; 
    content: ""; 
    right: 0; 
    height: 100%; 
    box-sizing: border-box; 
} 

.right { 
    position: relative; 
    height: 100px; 
    box-sizing: border-box; 
    padding-right: 30px; 
    width: 400px; 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0 0 0 -10px; 
} 

.right::before { 
    position: absolute; 
    border-top: 1px solid #333; 
    top: 50%; 
    z-index: 1; 
    width: 100%; 
    content: ""; 
    left: 30px; 
} 

.right::after { 
    position: absolute; 
    border-top: 1px solid #333; 
    border-right: 1px solid #333   
    border-bottom: 1px solid #333; 
    top: 0; 
    z-index: 1; 
    width: 30px; 
    content: ""; 
    left: 0; 
    height: 100%; 
    box-sizing: border-box; 
} 
</style> 

http://codepen.io/robotslater/pen/LpgxGe

Answer 4

让我补充另一种方式。我不在HTML中使用任何额外的div。只有一个包装和一个跨度。

跨度获取括号内的类来绘制括号。我使用线性渐变作为边框。在这个例子中，我使用了一个简单的黑色透明黑色渐变，但是当然你可以使用更复杂的渐变。

然后我在包装div上使用两个伪元素来绘制水平线。在这里，你也可以获得比简单的黑色边框更多的花式。

body { 
 
\t background: linear-gradient(to right, #ffc, #ccf); 
 
} 
 
.bracketed{ 
 
\t padding: 15px 20px; 
 
\t border: 1px solid; 
 
\t border-image: linear-gradient(to right, black 0%, black 29%, transparent 30%, transparent 70%, black 71%, black 100%); 
 
\t border-image-slice: 1; 
 
} 
 
.bordered { 
 
\t text-align: center; 
 
\t margin: 20px; 
 
\t display: flex; 
 
} 
 
.bordered::before, .bordered::after{ 
 
\t content: ""; 
 
\t flex: 1; 
 
\t align-self: center; 
 
\t border: 1px solid black; 
 
\t border-width: 1px 0px 0px; 
 
\t height: 0; 
 
}

<div class="bordered"><span class="bracketed">A</span></div>

如果你想使用这个图片的所有您在HTML需要的是

<div class="bordered"><img /></div> 

看到有codepen字体 - 真棒图标的例子。