<h2>使用するSVG画像</h2>
<img src="https://nonosso.net/code-sample/mask_220513.svg" alt="SVG" />
<div class="grid">
<div class="accent"><p>単色</p></div>
<div class="accent accent-gradient"><p>グラデーション</p></div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1rem;
>div {
display: grid;
place-items: center;
height: 150px;
background-color: #f1f1f1;
color: #333;
>* {
position: relative;
z-index: 10;
}
}
}
.accent {
position: relative;
&::before {
position: absolute;
z-index: 0;
content: '';
top: 0; right: 0;
width: 166px; height: 82px;
background: rosybrown;
mask: url(https://nonosso.net/code-sample/mask_220513.svg) no-repeat;
}
}
.accent-gradient {
&::before {
background: linear-gradient(135deg, darkseagreen 0%, rosybrown 100%);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.