是否可以创建一个像下面这样在顶线和底线的中心有凹口的盒子?(包括边框插图?)
问问题
2023 次
3 回答
2
这是一个经过测试的工作小提琴 : Ie10、FF、Chrome、Safari
只需将您的内容放在.Content
div 中。(应该支持任何大小的内容)
HTML:
<div class="SpecialBox">
<div class="TopTriangle">
<div class="Gray Border">
<div class="Black Border">
<div class="White Border"></div>
</div>
</div>
</div>
<div class="Content">
Some Content
<br />
And another line of Content
</div>
<div class="BottomTriangle">
<div class="Gray Border">
<div class="Black Border">
<div class="White Border"></div>
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
.SpecialBox
{
background-color: black;
-webkit-box-shadow: inset 0 0 0 5px black, inset 0 0 0 6px gray;
box-shadow: inset 0 0 0 5px black, inset 0 0 0 6px gray;
display: inline-block;
color: white;
overflow: hidden;
position: relative;
}
.Content
{
padding: 20px;
}
.Border
{
width: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
position: absolute;
}
.Gray
{
position: relative;
margin: 0 auto;
}
.TopTriangle .Gray
{
border-top: 25px solid gray;
}
.BottomTriangle .Gray
{
border-bottom: 25px solid gray;
top: -1px;
}
.Black
{
left: -35px;
}
.TopTriangle .Black
{
border-top: 25px solid black;
top: -27px;
}
.BottomTriangle .Black
{
border-bottom: 25px solid black;
top: 1px;
}
.Black:before
{
content: '';
position: absolute;
left: -35px;
width: 70px;
height: 6px;
background-color: black;
}
.TopTriangle .Black:before
{
top: -24px;
}
.BottomTriangle .Black:before
{
top: 19px;
z-index: 1;
}
.White
{
left: -35px;
}
.TopTriangle .White
{
border-top: 25px solid white;
top: -30px;
}
.BottomTriangle .White
{
border-bottom: 25px solid white;
top: 6px;
z-index: 2;
}
注意:它可能可以用 DOM 中的少量元素来完成(使用更多的伪元素)
于 2013-09-27T09:08:39.773 回答
1
该解决方案使用图像(非常宽的图像)来覆盖盒子可能占用的所有宽度。并使用边框图像。(目前IE不支持)
HTML:
<div class="SpecialBorder">
<div class="Content">
Some Content
</div>
</div>
CSS:
.SpecialBorder
{
border: 20px solid black; /* fallback for IE*/
-moz-border-image: url(http://i.stack.imgur.com/ZB9vk.png) 20 20 repeat;
-o-border-image: url(http://i.stack.imgur.com/ZB9vk.png) 20 20 repeat;
-webkit-border-image: url(http://i.stack.imgur.com/ZB9vk.png) 20 20 repeat;
border-image: url(http://i.stack.imgur.com/ZB9vk.png) 20 20 repeat;
}
.Content
{
background-color: #1d1d1d; /* same BG as the image*/
}
于 2013-09-29T21:43:20.663 回答
1
尝试用最少的标记来做到这一点,并且凹槽和插图是透明的:
CSS
.test {
position: absolute;
width: 200px;
height: 400px;
top: 40px;
left: 40px;
background-image: linear-gradient(-135deg, transparent 30px, black 30px),
linear-gradient(135deg, transparent 30px, black 30px),
linear-gradient(-45deg, transparent 30px, black 30px),
linear-gradient(45deg, transparent 30px, black 30px),
radial-gradient(200px 5px ellipse at 50% 50%, transparent 70px,
black 73px);
background-size: 50% 20%, 50% 20%, 50% 72%, 50% 72%, 100% 10%;
background-position: left top, right top, left bottom, right bottom, left 20%;
background-repeat: no-repeat;
}
而且,正如所承诺的,一个简单的 HTML
<div class="test"></div>
小提琴
注意:该示例使用最新的渐变语法。可以在任何支持多种背景的浏览器中工作,适应渐变语法
于 2013-09-27T21:09:47.583 回答