<div class="root">
  <article class="content">
    <h4>Percy Bysshe Shelley</h4>
    <h5>Poet, dramatist, essayist, novelist</h5>
    <p>One of the major English Romantic poets, who is regarded by some as among the finest lyric and philosophical poets in the English language, and one of the most influential.</p>
    --cs: 30px;
    --br: 20px;
body {
    background-image: linear-gradient(122deg, #8457f6 0%, #9cd7ff 100%);
.root {
    display: flex;
    height: 100vh;
    align-items: center;
    filter: drop-shadow(0 0 6px #6F47D3);

.content {
    position: relative;
    margin: auto;
    max-width: 260px;
    border-radius: var(--br);
    background-color: #ffffff;
    color: #363c5f;
    padding: 40px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    clip-path: polygon(0 0, calc(100% - var(--cs)) 0, 100% var(--cs), 100% 100%, 0 100%);

.content::after {
    content: '';
    position: absolute;
    display: block;
    width: var(--cs);
    height: var(--cs);
    background-color: #e1e1f2;
    top: 0;
    right: 0;
    border-bottom-left-radius: var(--br);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.