html – 为框CSS添加深度

概述我试图用CSS添加侧面div,但似乎无法搞清楚.这就是我到目前为止所拥有的.谁能指出我正确的方向？我在下面列出了我想要复制的图片.这是中间的盒子. body { background: #1b1b1b; color: white;}.container { display: table; margin: auto;}.box { width: 150px; he 我试图用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 >	<div ></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 >  <div >1</div>  <div >2</div>  <div >3</div></div>

这是一个快速演示：https://jsfiddle.net/15k214am/3/

转换的一些乐趣导致我很无聊：https://jsfiddle.net/15k214am/4/

这是一个小调整,允许背景颜色显示：https://jsfiddle.net/15k214am/5/

总结

以上是内存溢出为你收集整理的html – 为框CSS添加深度全部内容，希望文章能够帮你解决html – 为框CSS添加深度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。