JSFiddle - React, Tailwind, and code Playground

by Lindow

HTML

<div class="image">
    <span class="text">
        <p>Text here</p>
        <p>And here</p>
    </span>
</div>

CSS

.image {
    height:300px;
    width:300px;
    background-image: url('http://media.rtl.fr/cache/rsivxfof8rm56UYJib6Dfg/880v587-0/online/image/2017/0405/7787971923_un-delta-pris-en-photo-de-l-espace.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.image::before,
.image::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
}

.image::before {
    border-width: 1.5em;
}

.image::after {
    border-width: 3.35em;
    border-bottom-color: #fff;
    border-right-color: #fff;
}

.text {position:absolute; bottom:0; right:0; z-index:1;}

p {
  margin-top: 0px;
  margin-bottom: 0px;
}