3

Результат, который надо получить, на картинке: Необходимый результат

Структура:

<div class="promo-text">
                <h2>Нет слова "Нет"</h2>
                <p>Данное слово неуместно в нашей работе . Любая задача, уровень сложности и оперативность — мы умеем удивлять! Альтернативу никто не отменял и мы всегда ее находим.</p>
</div>
2
  • В чем возникли трудности?
    – 0xdb
    29 мая 2017 в 14:31
  • Если применять clip-path, срезается рамка. Не получается сделать так, чтобы осталась скошенной именно рамка
    – Алёна
    29 мая 2017 в 14:41

2 ответа 2

2

Вопрос решился добавлением родительского блока.

.outer {
  padding: 3px 3px 6px 3px !important;
  background-color: @dark-color !important;
  z-index: 0;
}

.inner {
  z-index: 100;
}

.promo-text {
  background: gray;
  padding: 40px 60px 120px 55px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 55%, 0% 75%);
  clip-path: polygon(0 0, 100% 0, 100% 55%, 0% 75%);
}
<div class="promo-text outer">
  <div class="promo-text inner">
    <h2>Нет слова "Нет"</h2>
    <p>Данное слово неуместно в нашей работе . Любая задача, уровень сложности и оперативность — мы умеем удивлять! Альтернативу никто не отменял и мы всегда ее находим.</p>
  </div>
</div>

-2

Можно сделать скрипт, который будет лепить примерно такую конструкцию:

.promo-text{
  width:200px;
  margin: 0 auto;
  border: 1px solid black;
  border-bottom: none;
  background: #777777
}
.promo-text::after{
    content: " ";
    width: 210px;
    height: 49px;
    margin-top: -36px;
    margin-left: 0px;
    position: absolute;
    border-top: 1px solid black;
    background: white;
    transform: rotate(-11deg);
    display: block;
}
<div class="promo-text">
                <h2>Нет слова "Нет"</h2>
                <p>Данное слово неуместно в нашей работе . Любая задача, уровень сложности и оперативность — мы умеем удивлять! Альтернативу никто не отменял и мы всегда ее находим.</p>
</div>

4
  • А если фон будет другого цвета или разноцветный? не годится...
    – Ruslan
    29 мая 2017 в 14:48
  • Но как в таком случае сделать адаптивность? Используется bootstrap, и блок меняет свою ширину
    – Алёна
    29 мая 2017 в 14:48
  • @Алёна с помощью js
    – Darth
    29 мая 2017 в 15:01
  • или фоновый рисунок
    – DNS
    29 мая 2017 в 15:07

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.