0
さまざまなダミー要素を使用せずに、そのマスクを配置することなく、「曖昧な」輪郭と丸みを帯びた半透明のマスクを作成する方法はありますか？この例は、3つのダミー要素を持つアイデアを示しています。丸みを帯びた半透明マスクの作成方法
html {
padding: 0;
margin: 0;
}
body {
background: url(https://unsplash.it/1000/1000) no-repeat;
padding: 0;
margin: 0;
}
.outer {
max-width: 20rem;
position: relative;
}
.inner {
color: white;
position: relative;
z-index: 9999;
}
.mask {
position: absolute;
top: 0;
left: 0;
bottom: 6rem;
right: 0;
background: rgba(0, 0, 0, .1);
}
.mask .bottom {
position: absolute;
bottom: -10rem;
height: 10rem;
width: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 100%);
}
.mask .right {
position: absolute;
right: -4rem;
width: 4rem;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 100%);
}
.mask .bottom-right {
position: absolute;
right: -4rem;
bottom: -10rem;
width: 4rem;
height: 10rem;
/* 1/sqrt(2) */
background: radial-gradient(ellipse at 0 0, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, 0) 70.71%);
}<div class="outer">
<div class="mask">
<div class="bottom"></div>
<div class="right"></div>
<div class="bottom-right"></div>
</div>
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id pharetra nulla. Mauris ultricies aliquam augue, tristique convallis turpis pulvinar tincidunt. Curabitur pretium sollicitudin imperdiet. Maecenas venenatis dignissim dolor vitae tempor.
Morbi non posuere ipsum. Vivamus vel tincidunt magna. Cras dictum lacinia massa, vel malesuada lacus sollicitudin eget.
</div>
</div>私はボーダー-画像を使用してみましたが、右の境界が奇数に見えることがわかった、と私は多くのことを私のオプションを制限することを着色する線形グラデーションを使うことができています。また、背景色と衝突し、ボーダー半径では機能しません。
また、複合グラデーションを作成しようとしましたが、開始位置と角度（線形グラデーションの場合）しか定義できないようです。これは、グラデーションが重なり合うようにします。境界線が常に透明であるとは限らず、オーバーラップするグラデーションを定義する前に、領域を完全に塗りつぶす手法を使用することができない場合は、
疑似要素などでこれを実現するスマートな方法はありますか？