透明背景上的圖標和元素部分邊框

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字體 - 真棒圖標的例子。