我试图用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/
原文地址:https://www.jb51.cc/html/226428.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。