如何使用具有倾斜边框装饰的相邻div实现双边框

时间：2017-10-11 01:42:48

标签： html css css3

我试图创建三个独立的容器，带有＃34;漫画书条带＆＃34;有种感觉。我希望最终的结果看起来像这个图像，白色边框被黑色边框包围，并且它们之间有角度分隔线：

enter image description here

这是我最接近实现这一目标的方法，但是你会发现我错过了黑色内边框。我也不确定如何在顶部和底部绘制主黑色边框，并允许它们中断以使白色相交。 （请在全屏模式下运行代码段）：

＆＃13;
＆＃13; 
.container {
    width: 1020px;
}

.clear{clear:both; font-size:0px;line-height:0px; display:block;}

.categorycta {
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	background-color: #ffffff;
}

.bandtop {
	content: '';
	height: 10px;
	background-color: #ffffff;
	display: block;
	border-top: 2px solid #000;
}

.bandbot {
	content: '';
	height: 10px;
	background-color: #ffffff;
	display: block;
	border-bottom: 2px solid #000;
}

.categorycta .col {
	position: relative;
	height: 216px;
    width: 340px;
	float: left;
	background-size: cover;
}

.categorycta .col.left:after {
	content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 20px solid transparent;
    border-top: 216px solid #fff;
    border-left: 10px solid transparent;
    border-right: 0 solid #fff;
    position: absolute;
    top: 0;
    right: 0;
}

.categorycta .col.mid:before {
	content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 216px solid #fff;
    border-top: 20px solid transparent;
    border-left: 0px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -20px;
    left: 0;
}

.categorycta .col.mid:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 216px solid #fff;
    border-left: 10px solid transparent;
    border-right: 0 solid #fff;
    position: absolute;
    top: -20px;
    right: 0;
}

.categorycta .col.right:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 216px solid #fff;
    border-bottom: 20px solid transparent;
    border-left: 0px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}
＆＃13; 
<div class="container">
<div class="bandtop"></div>
<div class="categorycta">
    <div class="col left" style="background-image: url('http://lorempixel.com/340/220/');">

    </div>
    <div class="col mid" style="background-image: url('http://lorempixel.com/340/222/">
    </div>
    <div class="col right" style="background-image: url('http://lorempixel.com/340/225/">
    </div>
    <div class="clear"></div>
</div>
<div class="bandbot"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：3)

您需要移除现有边框，而不是使用transform: skewX(2deg);并在其周围添加黑色边框，使用margin-top覆盖顶部和底部边框。

示例：

＆＃13;
＆＃13; 
.container {
    width: 1020px;
}

.clear{clear:both; font-size:0px;line-height:0px; display:block;}

.categorycta {
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	background-color: #ffffff;
}

.bandtop {
	content: '';
	height: 10px;
	background-color: #ffffff;
	display: block;
	border-top: 2px solid #000;
}

.bandbot {
	content: '';
	height: 10px;
	background-color: #ffffff;
	display: block;
	border-bottom: 2px solid #000;
}

.categorycta .col {
	position: relative;
	height: 216px;
    width: 340px;
	float: left;
	background-size: cover;
}

.categorycta .col.left:after {
	  content: '';
    line-height: 0;
    font-size: 0;
    width: 10px;
    height: 102%;
    /* border-bottom: 20px solid transparent; */
    /* border-top: 216px solid #fff; */
    /* border-left: 10px solid transparent; */
    /* border-right: 0 solid #fff; */
    background: white;
    transform: skewX(2deg);
    border-left: 2px solid black;
    border-right: 2px solid black;
    margin-top: -2px;
    z-index: 1;
    position: absolute;
    top: 0;
    right: -10px;
}

.categorycta .col.mid:before {
	content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 216px solid #fff;
    border-top: 20px solid transparent;
    border-left: 0px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: -20px;
    left: 0;
}

.categorycta .col.mid:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 10px;
    height: 102%;
    position: absolute;
    top: 0;
    right: -9px;
    background: white;
    transform: skewX(-3deg);
    border-left: 2px solid black;
    border-right: 2px solid black;
    margin-top: -2px;
    z-index: 1;
}

.categorycta .col.right:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 216px solid #fff;
    border-bottom: 20px solid transparent;
    border-left: 0px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}
＆＃13; 
<div class="container">
<div class="bandtop"></div>
<div class="categorycta">
    <div class="col left" style="background-image: url('http://lorempixel.com/340/220/');">

    </div>
    <div class="col mid" style="background-image: url('http://lorempixel.com/340/222/">
    </div>
    <div class="col right" style="background-image: url('http://lorempixel.com/340/225/">
    </div>
    <div class="clear"></div>
</div>
<div class="bandbot"></div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

这样的事情怎么样？它可能不是最整洁的解决方案，但它看起来几乎与你的照片相同。 您可以根据自己的喜好调整一些值，我主要使用剪辑路径。黑色背景和上面的图像尺寸稍小。

＆＃13;
＆＃13; 
.container {
    width: 1020px;
}

.categorycta {
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
  padding: 10px 0;
	background-color: #ffffff;
  height: 220px;
}

.comic-panel {
  background-color: #000;
  height: 222px;
  position: absolute;
}

.comic-left {
  -webkit-clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%);
}

.comic-left > img {
  -webkit-clip-path: polygon(1% 1%, 89% 1%, 99% 99%, 1% 99%);
  clip-path: polygon(1% 1%, 89% 1%, 99% 99%, 1% 99%);
}

.comic-middle {
  left: 340px;
  -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}

.comic-middle > img {
  -webkit-clip-path: polygon(1% 1%, 99% 1%, 89% 99%, 11% 99%);
  clip-path: polygon(1% 1%, 99% 1%, 89% 99%, 11% 99%);
}

.comic-right {
  left: 680px;
  -webkit-clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.comic-right > img {
  -webkit-clip-path: polygon(9% 1%, 99% 1%, 99% 99%, 11% 99%);
  clip-path: polygon(9% 1%, 99% 1%, 99% 99%, 11% 99%);
}
＆＃13; 
<div class="container">
<div class="categorycta">
    <div class="comic-panel comic-left">
        <img src="http://lorempixel.com/340/220/">
    </div>
    <div class="comic-panel comic-middle">
        <img src="http://lorempixel.com/340/222/">
    </div>
    <div class="comic-panel comic-right">
        <img src="http://lorempixel.com/340/225/">
    </div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

您可以使用剪辑路径属性执行此操作。

首先从内部图像中删除所有边框，然后将它们显示为内联块（并将父元素font-size设置为0以避免显示问题）。

然后为您将需要的每种不同类型的图块创建剪辑路径。例如：

.left{
    -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}

您可以使用img标记，而不是将图像作为背景。图像的大小等于容器的大小减去边框（例如，如果容器的大小为200 x 175px，并且您希望边框宽度为5px，则将图像设置为190 x 165px）。最后，您将相同的剪辑路径应用于图像本身。

简而言之，您并不真正使用边框。您可以通过创建一个略小于容器并居中的图像来模拟它们。 

.col img {
    position: absolute;
    left:5px; /* Desired thickness of your border */
    top: 5px; /* Desired thickness of your border */
    width: 190px; /* Width of the container minus the thickness of the border multiplied by two*/
    height: 165px; /* Heightof the container minus the thickness of the border multiplied by two*/
}   

.left img {
    -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
}

这是一个Jsfiddle（我使用红色边框进行可见性，包括五个图像而不是三个图像，以显示您可能需要使用的所有可能类型的图块）：

https://jsfiddle.net/rsjc1pL4/

相关问题
最新问题