我试图用CSS添加侧面div,但似乎无法搞清楚.这就是我到目前为止所拥有的.谁能指出我正确的方向？我在下面列出了我想要复制的图片.这是中间的盒子.
body {
background: #1b1b1b;
color: white;
}
.container {
display: table;
margin: auto;
}
.Box {
width: 150px;
height: 150px;
background: #cc0000;
margin: 50px;
}
.right-skew {
position: relative;
}
.right-skew:before {
z-index: -1;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -15px;
display: block;
width: 35px;
background: grey;
-webkit-transform: skew(-10deg);
-ms-transform: skew(-10deg);
transform: skew(-10deg);
}
.right-skew:after {
z-index: -1;
content: '';
position: absolute;
top: 0;
bottom: 0;
right: -15px;
display: block;
width: 35px;
background: grey;
-webkit-transform: skew(10deg);
-ms-transform: skew(10deg);
transform: skew(10deg);
}
.skew-border {
border: 5px solid yellow;
}
<div class="container"> <div class="Box right-skew"></div> </div>
解决方法
你可以很容易地用边框完成这个.
我在左右两侧放置了一个大边框,只有颜色和左右边框相反.
* {
Box-sizing: border-Box;
}
.Boxes {
display: flex;
justify-content: center;
}
.Box {
width: 30%;
height: 200px;
text-align: center;
}
.Box--1,.Box--3 {
border: 20px solid white;
background-color: rgb(200,0);
}
.Box--1 {
border-right-color: red;
}
.Box--3 {
border-left-color: red;
}
.Box--2 {
background-color: darkred;
}
<div class="Boxes"> <div class="Box Box--1">1</div> <div class="Box Box--2">2</div> <div class="Box Box--3">3</div> </div>
这是一个快速演示：https://jsfiddle.net/15k214am/3/
转换的一些乐趣导致我很无聊：https://jsfiddle.net/15k214am/4/
这是一个小调整,允许背景颜色显示：https://jsfiddle.net/15k214am/5/
