我怎样才能使我的照片在同一水平上的div和重叠一点？
<div id='triangle-topleft'>
<img id="photo" src="photo.png">
</div>
#triangle-topleft {
width: 0;
height: 0;
border-top: 350px solid #66CCFF;
border-right: 350px solid transparent;
position: absolute;
left: 0%;
}
#photo {
position: absolute;
left: 0%;
float: left;
}
演示
将规则。
另外，将
null
#triangle-topleft {
width: 0;
height: 0;
border-top: 350px solid #66CCFF;
border-right: 350px solid transparent;
position: relative;
left: 0%;
}
#photo {
position: absolute;
left: 0%;
float: left;
transform: translateY(-30%);
}<div id='triangle-topleft'>
<img id="photo" src="https://st.depositphotos.com/2000885/1902/i/600/depositphotos_19021343-stock-photo-red-heart.jpg">
</div>
不需要
null
.box {
background: red;
display: inline-block;
}
.box img {
display: block;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}<div class="box"><img src="https://picsum.photos/id/1/200/200"></div>
您将需要在以下文件中:照片:
