SVGで作る非長方形なヘッダ画像いろいろ
Result
インラインに書いたSVGを画像に重ねる
背景と色を合わせれば簡単にユニークな形状のヘッダ画像を実装できる
css
.card {
width: 32%;
max-width: 100%;
margin: 0 0 4rem;
background-color: #ddd;
}
.card .wrap-image {
position: relative;
}
.card .wrap-image img {
width: 100%;
height: auto;
}
.card .wrap-image svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
}
.card .wrap-image svg polygon, .card .wrap-image svg path {
fill: #ddd;
stroke: #ddd;
}
.card:nth-child(4) .wrap-image svg path {
stroke-width: 3px;
}
.card:nth-child(5) .wrap-image svg path {
stroke-width: 4px;
}
.card:nth-child(6) .wrap-image svg path {
stroke-width: 6px;
}
|
html
<div class="card">
<div class="wrap-image">
<img src="https://picsum.photos/400/300">
<svg viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon points="0,100 100,100 100,0"></polygon>
</svg>
</div>
<div class="contents">
<h3>bar</h3>
<div class="text">foo</div>
</div>
</div>
|
via
Non Rectangular Headers with inline SVG
