デザインコード紹介
Chapter1 背景・画像・写真装飾
角に切り込み
更新日:
HTML
<div class="pic">
<img src="picture.jpg" alt="グループが談笑している写真">
</div>
CSS
.pic {
position: relative;
}
.pic::before,
.pic::after {
content: '';
position: absolute;
transform: rotate(-35deg);
width: 70px;
height: 25px;
background-color: #fff;
}
.pic::before {
top: -10px;
left: -25px;
border-bottom: 1px solid #aaa;
}
.pic::after {
bottom: -10px;
right: -25px;
border-top: 1px solid #aaa;
}
できるだけ誌面とコードの色を近づけるように調整しましたが、印刷物と画面表示との差異はどうしても発生してしまいます。サポートサイトでご確認いただける色が実際に表示されます。