Как сверстать такую обводку?

Пробовал так:
.text p{ position: relative; text-transform: uppercase; z-index: 1; margin-top: 30px; color: #fde428; display: inline-block; cursor: pointer; border-bottom: 2px solid #fde428; } .text{ position: relative; text-align: right; width: 50%; } .text h2{ position: relative; } .text::after{ content: ""; width: 180px; height: 220px; border: 5px solid #fde428; position: absolute; border-left: transparent; top: -20px; right: calc(50px - 180px); } .text h2::after{ content: ""; width: 5px; height: 16px; background: #fde428; position: absolute; border-left: transparent; top: -17px; right: 50px; } .text p::after{ content: ""; text-decoration: none; width: 5px; height: 16px; cursor: default; background:#fde428; position: absolute; border-left: transparent; top: -22px; right: 50%; } .text p:before{ text-decoration: none; content: ""; width: 5px; height: 54px; cursor: default; background:#fde428; position: absolute; border-left: transparent; top: 22px; right: 50%; }

Consumer
Products
Consulting

LEARN MORE

Да уж больно криво и костыльно мне кажется.

Ответ

Могу предложить такое решение на codePen.io.
body { background-color: #555; } .text{ position: relative; margin: 0 auto; text-align: right; width: 180px; height: 220px; border: 5px solid #fde428; border-left: transparent; } .text::before, .text::after { content: ""; position: absolute; left: -5px; display: block; width: 5px; } .text::before { height: 20px; box-shadow: 5px 125px 0 #fde428; } .text::after { height: 40px; box-shadow: 5px 0 0 #fde428, 5px 180px 0 #fde428; } .text h2{ position: absolute; color: white; top: 10%; transform: translateX(-60%); } .text p{ position: absolute; bottom: 15%; transform: translateX(-50%); text-transform: uppercase; color: #fde428; cursor: pointer; border-bottom: 2px solid #fde428; }