Страницы

Поиск по вопросам

четверг, 2 января 2020 г.

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

#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
Consulting

LEARN 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; }
Lorem
ipsumLearn more


Ответ 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


Комментариев нет:

Отправить комментарий