我正在尝试使用CSS创建横幅的背景,其中一侧有一种颜色,另一侧有另一种颜色,并且带有45度的切割,就像这样:
我能够重新创建上面的图片,但是投影没有保持正确的位置。 非常感谢任何建议。这是我的代码:
#container {
height: 100px;
width: 400px;
overflow: hidden;
background-color: #2962ff;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid #2196f3;
border-right: 400px solid transparent;
-webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.75);
}
<div id="container">
<div id="triangle-topleft"></div>
</div>
position:relative;
,然后将此CSS应用于您的伪元素。`box-shadow: 0 0 20px 0px rgba(0,0,0,0.75); position: absolute; width: 250px; height: 100px; background: #2196f3; transform: skew(-45deg); left: -50px;`
- Jake