Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Стили (CSS) Как мне вывести это с помощью border'а?

Как мне вывести это с помощью border'а?


     19.02.2016    Стили (CSS)    525

вопрос
Здравствуйте, подскажите пожалуйста как можно такое вывести с помощью css и html?

Как мне вывести это с помощью border'а?

Ответил: dimavdv


ПафНутиЙ, Посидел с часик, и даже поседел. Но справился вот простой настоящий ответ. https://jsfiddle.net/webma/6Lg7njgb/

html:

<div class="trap">
    <div class="site">Сайт dle-faq.ru
    </div>
</div>

css3:

.trap {
    font-size: 20px;
    width: 250px;
    height: 70px;
    position: relative;
}

.site {
    color: #FFF;
    padding-top: 10px;
    padding-left: 10px;
    position: absolute;
}
.trap:before {
    content: "";
    border-bottom: 45px solid transparent;
    border-right: 220px solid #717171;
    border-top: 45px solid #717171;
    position: absolute;
    left: 0;
    top: 0;
}

.trap:after {
    content: "";
    border-top: 90px solid #717171;
    border-right: 30px solid transparent;
    position: absolute;
    right: 0;
    top: 0;
}

Комментарии пользователей (6)

dimavdv
9

192 | 33

dimavdv - 19 февраля 2016 21:25 - Юзер

Это не ответ! Перед тем как я задал вопрос не поверишь, но я искал решение в интернете.

kolumb
8

203 | 46

kolumb - 19 февраля 2016 21:27 - Юзер

Плохо искали https://habrahabr.ru/post/126207/

dimavdv
9

192 | 33

dimavdv - 19 февраля 2016 21:29 - Юзер

это я тоже видел. Но как сделать именно то что мне надо я понять не могу.

dimavdv
9

192 | 33

dimavdv - 19 февраля 2016 21:30 - Юзер

Как делать трапецию, я уже знал.

ПафНутиЙ
1064

3393 | 2433

ПафНутиЙ - 19 февраля 2016 22:44 - Админ

SVG в помощь.

Каков вопрос - таков и ответ. Просто помните об этом.

dimavdv
9

192 | 33

dimavdv - 19 февраля 2016 22:50 - Юзер

***Комментарий удален***

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы