toggle
札幌市東区にあるマンガ・イラスト制作、WEBデザイン・DTP制作、雑貨制作、MOSなどを学び、行う就労支援事業所です。
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楽しい!!それではまた~。


タグ: , ,
関連記事