[Webデザイン]菱形画像
html
<div class="diamond">
<img src="https://placeimg.com/300/300/any" >
</div>.diamond {
width: 300px;
height: 300px;
transform: rotate(45deg);
overflow: hidden;
}
.diamond > img {
max-width: 100%;
min-width: 100%;
transform: rotate(-45deg) scale(1.5);
position: relative;
}
max-width・min-width100%画像を全て埋め尽くすrelativeを中心にReference
この問題について([Webデザイン]菱形画像), 我々は、より多くの情報をここで見つけました https://velog.io/@tjdgus3160/마름모꼴-이미지テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol