我试图创建一个只使用HTML/CSS的矩阵效果,我找到的方法是应用实线边框,现在删除顶部和底部的一些部分,有人知道我如何才能只使用CSS创建此效果(如果可能)?
有一张图片可以更好地解释我的目标:
发布于 2014-04-15 08:28:56
一种语义方法是根本不给实际元素一个边框!您可以使用:before
和:after
伪元素作为右侧和左侧的透明框。伪元素被赋予了透明的背景和边框,这些背景和边框不会与创建效果的内容重叠。
这适用于任何背景:http://jsfiddle.net/kkYrP/8/
.box{
position:relative;
}
.box:before{
content: "";
position: absolute;
top: -2px;
left: -2px;
bottom: -2px;
width: 8%;
border: 2px solid #333;
border-right:none;
z-index:1;
}
.box:after{
content: "";
position: absolute;
top: -2px;
right: -2px;
bottom:-2px;
width: 8%;
border: 2px solid #333;
border-left:none;
z-index:1;
}
注意:如果您有点击/悬停问题,请尝试在:before
和:after
上添加pointer-events:none;
。
发布于 2014-04-15 08:42:52
给出一个边框-左和右:
.box {
border-left:2px solid #333;
border-right:2px solid #333;
}
并添加具有负z索引的伪元素:
.box:before{
content:"";
background:#333;
position:absolute;
z-index: -1;
left:-2px;
width: 20px;
top:-2px;
bottom:-2px;
}
.box:after{
content:"";
background:#333;
position:absolute;
z-index: -1;
right:-2px;
width: 20px;
top:-2px;
bottom:-2px;
}
这解决了@David的问题,并基于@James的解决方案。
发布于 2014-04-15 16:10:35
扩展James Bruckner的回应,我最近不得不做一些类似的事情,但我必须用大括号。基本上,您将大括号作为内容添加到:after
和:before
中,并对它们进行绝对定位。你可以在下面的链接中看到实现。
你的HTML
<div class="box">This is a test. This is a test. This is a test. This is a test. This is a test. </div>
你的CSS
div {
padding:3em;
font-size:1em;
width:20em;
position:relative;
}
div:after,
div:before {
font-size:6.7em;
color:#999;
position:absolute;
top:0;
}
div:before {
content: "[";
left:0;
}
div:after {
right:0;
content:"]";
}
https://stackoverflow.com/questions/23072566
复制相似问题