2020-08-18
画像をアルバムのようにおしゃれにする方法
こんにちは。
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楽しい!!それではまた~。
関連記事