画像をアルバムのようにおしゃれにする方法

こんにちは。
web担当のまるたにです。

タイトル通りおしゃれにしちゃいましょう。

<div class="img">
<img src="https://www.melike.biz/wp/wp-content/uploads/2020/08/IMG_5466.jpg" alt="" width="1200" height="900" class="alignnone size-full wp-image-5257" /></div>
<!--divで囲み画像を挿入-->

<style>
.img{
position:relative;
}
.img::before,.img::after{
content: '';
position:absolute;
transform: rotate(-35deg);
width: 70px;
height: 25px;
background-color:#fff;
z-index:1;
}
.img::before{
top: -10px;
left: -25px;
border-bottom:1px solid #aaa;
}
.img::after{
bottom: -10px;
right: -25px;
border-top: 1px solid #aaa;
}
</style>

CSS楽しい！！それではまた～。

Tweet