答案 0 :(得分:4)
您可以使用这样旋转的伪元素来执行此操作:
body {
background-color: #00bcd4;
}
.main {
margin: 50px;
overflow: hidden;
position: relative;
width: 350px;
}
.image {
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat;
background-size: cover;
height: 200px;
}
.text {
background-color: white;
padding: 30px;
position: relative;
}
.text > div {
position: relative;
z-index: 1;
}
.text:before {
content: "";
background-color: white;
position: absolute;
height: 100%;
width: 120%;
top: -20px;
left: -10%;
transform: rotate(5deg);
z-index: 0;
}
<div class="main">
<div class="image"></div>
<div class="text">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae gravida purus. Ut quis elit magna. Fusce et mattis sapien. Sed venenatis magna ut ligula facilisis, eget vulputate neque aliquet. Nulla lacinia condimentum leo non aliquet. Integer
et enim dapibus, tempor ipsum non, fringilla enim. Cras semper fermentum dolor, at pharetra dolor ornare sit amet. Morbi eu dictum orci, tincidunt pretium nisi. Sed finibus vulputate eleifend. Nulla ac leo facilisis, fermentum tellus in, feugiat
risus. Curabitur in sem luctus, pellentesque justo nec, aliquet velit. Nam euismod est sit amet ultrices consequat.
</div>
</div>
</div>
答案 1 :(得分:1)
据我所知,它不能直接使用任何单一的CSS属性,你必须通过使用伪元素来破解它,或者最好的方法是使用SVG来做它
.container {
width: 90%;
margin: 0 auto;
}
.box {
width: 200px;
height: 150px;
text-align: center;
}
.box-1 {
background: #ff6347;
}
.box-2 {
background: #0ff;
}
.box-2:before {
display: inline-block;
margin: 0;
margin-top: -30px;
margin-left: -30px;
content: '';
border: 30px solid transparent;
border-right: 200px solid #0ff;
}
&#13;
<div class="container">
<div class="box box-1"></div>
<div class="box box-2">
TITLE 1
</div>
</div>
&#13;
答案 2 :(得分:0)
.container {
width: 400px;
margin: 0 auto;
}
.box {
width: 200px;
height: 150px;
text-align: center;
float: left;
}
.box-1 {
background: #ff4500;
}
.box-2 {
background: #0ffab9;
}
.box-2:before {
display: inline-block;
margin: 0;
margin-left: -101px;
margin-top: -1px;
position: absolute;
content: '';
width: 0;
height: 0;
border-bottom: 151px solid #0ffab9;
border-left: 30px solid transparent;
}
<div class="container">
<div class="box box-1">
</div>
<div class="box box-2">
TITLE 1
</div>
</div>