<div class="container">
<div class="title">Lorem Ipsum</div>
<div class="content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
$bg-mask = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAYAAACrDxUoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAdhJREFUeNrsmz9LQlEYxl/TpEmMqCBoSSVwrQbXhlpq9wMIbX6HRnfxE7Q21VJDQ7REtQaRtARBYVQ0FDXYc7jvIP3Te+7x3OI+P/ihiTY85/F0/7ylRKQrhMTECCOIxJtKWMBYeFKJJRlGEIlLfZxkFNwB4+BMJSxgLOyrxJIUz4KtuYcz+vwGTjAS7oA+afacBTcZB3dAn9zBefioP+fhBZxiNNwBfVDvKZ/o8zpjsaNLQ9ns82eZGYWTIYRwG6Z/KWBa38OsWEDntvqUr7eELebFArryFlYtDm2q+llmyAJa2YGbeoZrS15/R4d5fi8vwwS8wwd4BU/07saevu6CUbgKV+ASnIPj+jqvAzpcxB24K8H90WtdVPL/MV+WWbgA1+C6yy+Pi630EBa5TomhqGv+J44Bt4RjXUkko2sfawGPYJZrkViy2oFYCvgCC1yDxFPQLngvYIPZE6Xhu4BmGiTH3ImS0054K2CNmZNP1HwV8Fg4xkW+MqLdGGoBzdxbiVmTHyhpR4ZSwGdYYcakDxXtitMCnsMysyUDUtbORC5gG24I73SQ8GS0O20ZYBrmVYLBATO/Zv7b3wwTHMBT4bQMiYbp2CJclmCYwRwnTksw4DD2IcAAXihUdzuT3HUAAAAASUVORK5CYII="
.container
width 500px
color white
border-top-left-radius 20px
border-top-right-radius 20px
margin auto
mask url($bg-mask) left -80px bottom/160px 30px no-repeat,
url($bg-mask) right -80px bottom/160px 30px no-repeat,
linear-gradient(to top, rgba(black,0) 30px, rgba(black,1) 30px),
linear-gradient(to right, rgba(black,0) 80px, rgba(black,1) 80px, rgba(black,1) 50%, rgba(black,0) 50%),
linear-gradient(to left, rgba(black,0) 80px, rgba(black,1) 80px, rgba(black,1) 50%, rgba(black,0) 50%)
-webkit-mask @mask
filter drop-shadow(0 0 1px rgba(#26c8e7,.6))
position relative
.title
font-size 20px
position absolute
top 20px
left 20px
.content
font-size 15px
line-height 1.4
padding 50px 20px 30px
filter drop-shadow(0 0 20px rgba(#26c8e7,.6))
&:before
content ''
width @width
height 100%
background rgba(black,0.2)
mask @mask
-webkit-mask @mask
display block
position absolute
left 0
top 0
body
width 100vw
height 100vh
background black
display flex
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.