#html #css
Пробовал так: .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
ConsultingLEARN MORE
Ответы
Ответ 1
Могу предложить такое решение на 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; }Ответ 2
Если бы не промежуточный бордер все было бы совсем красиво. А так пока промежуточный вариант, может кто поправит... 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; }
Ответ 3
Добавлю и свой вариант) .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; }
Consumer Products Consulting
Learn more
Комментариев нет:
Отправить комментарий