JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<svg viewBox="0 0 300 300">
        <!-- Use foreignObject to allow HTML content inside SVG -->
        <foreignObject x="0" y="0" width="300" height="300">
            <div class="text-container">
                This text is inside a triangle and will be clipped to fit within its bounds. Adjust the content to make sure it fits well!
            </div>
        </foreignObject>
    </svg>

CSS

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

        svg {
            width: 300px;
            height: 300px;
        }

        .text-container {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
            font-size: 16px;
            line-height: 1.5;
            color: white;
            background-color: #333;
            clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
        }
    </style>