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

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

让我添加另一种方式。我没有在 html 中使用任何额外的 div。只有一个包装器和一个跨度。

跨度将类括起来以绘制括号。我使用线性渐变作为边框。在此示例中，我使用简单的黑色-透明-黑色渐变，但当然您可以使用更复杂的渐变。

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

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

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

如果你想在图像上使用它，你需要在 html 中做的是

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

请参阅codepen上带有很棒字体图标的示例。

Answer 2

老实说，我喜欢使用完整的 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