enter image description here

I tried this:

.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%; } 
  <div class="text"> <h2>Consumer<br>Products<br>Consulting</h2> <p >LEARN MORE</p> </div>

Yes, it hurt crookedly and crutch seems to me.

3 answers 3

I can offer such a solution on 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; }
  • An interesting option, but in IE and Edge checked? The box-shadow property is blurry, looks not very nice) - Eugene Fedak

If it were not for the intermediate border, everything would be quite beautiful. And so while the intermediate version, can someone correct ...

 body { display: flex; min-height: 100vh; background-color: darkblue; font-family: sans-serif; --bordersize: 8px; } fieldset { margin: auto; min-width: 8em; min-height: 6em; transform: rotate(-90deg); border: var(--bordersize) solid yellow; } legend { transform: rotate(90deg); color: white; font-size: 160%; text-align: right; } legend a { color: yellow; font-size: 50%; font-weight: 600; text-transform: uppercase; display: block; margin: 1em 0; position: relative; } legend a::after { content: ''; border: calc(var(--bordersize) / 2) solid yellow; position: absolute; right: calc(50% - calc(var(--bordersize) / 2)); top: -1em; height: .4em; } 
 <fieldset > <legend align="center">Lorem<br>ipsum<a href="#">Learn more</a></legend> </fieldset>

    I will add my own version)

     .demo { background-color: black; padding: 50px; } /* example */ .container { position: relative; width: 250px; height: 220px; border: 10px solid yellow; border-left: none; font-family: Arial; margin: 0 auto; margin-left: 48%; padding-bottom: 40px; } .container .content p:after, .container .content p:before, .container .content a:after { content: ""; position: absolute; display: block; width: 10px; background-color: yellow; } .container:before { height: 40px; } .container:after { height: 40px; margin-top: 10px; } .container .content { display: inline-block; position: relative; left: -48%; text-align: right; } .container .content p { font-size: 35px; color: white; } .container .content p:after { height: 40px; left: 48%; } .container .content p:before { height: 40px; top: 0px; left: 48%; } .container .content a { font-size: 25px; color: yellow; display: block; } .container .content a, .container .content p { margin-right: 25%; } .container .content a:after { top: calc(100% + 5px); height: 40px; left: 48%; } .container .content a:hover { color: green; } 
     <div class="demo"> <div class="container"> <div class="content"> <p>Consumer Products Consulting</p> <a href="#">Learn more</a> </div> </div> </div>