2

Как сделать блок со скошенной стороной как на картинке?

введите сюда описание изображения

Можно конечно было бы с помощью псевдо-элемента, со свойством transform: scewX() но фон у блока полу-прозрачный и в итого получается наложение друг на друга.

И еще вопрос: возможно ли на CSS сделать такой бордер:

введите сюда описание изображения

Или все же только картинкой?

2 ответа 2

3

Что за странное стремление делать всё чрез CSS? Такие вещи нужно делать при помощи изображений. И с чего ты взял, что нельзя псевдоэлемент выдвинуть за рамку элемента-родителя?

.bg {
  padding: 20px;
  background: #37f;
  margin-top: 50px;
}

.text {
  color: #b00;
  font-size: 15px;
  background: rgba(255, 255, 255, .5);
  padding: 15px;
  margin-right: 50px;
  position: relative;
}

.text::after {
  content: '';
  position: absolute;
  left: 100%; top: 0;
  width: 0;
  border-top: 47px solid rgba(255, 255, 255, .5);
  border-right: 50px solid transparent;
}
<div class="bg">
  <div class="text">
    Блаблабла
  </div>
</div>

По поводу второго вопроса: Сума не сходи, какой бордер? У тебя принцип не использовать изображения? Ты конечно можешь использовать какое-нибудь свойство типа border-image, но даже в таком случае, тебе нужна будет картинка. Не усложняй вёрстку, всё это можно сделать простыми методами.

1
  • 2
    Не догадался псевдо-элемент бордером сделать.... делал через ширину и высоту.... Спасибо. По второму, да конечно картинкой проще и быстрее, думал может хаки какие есть.....
    – pepel_xD
    3 дек 2016 в 10:29
1

В css есть border-image, но поддерживается пока не везде.

пример скоса с помощью псевдо элемента:

.hh {
  background: rgba(0, 0, 0, .5);
  width: 300px;
  position: relative;
  height: 2em;
  }
  .hh:after {
    box-sizing: border-box;
    position: absolute;
    content: '';
    width: 2em;
    height: 100%;
    left: 100%;
    top: 0;
    border: 1em solid rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.5) transparent transparent rgba(0, 0, 0, 0.5);
  }
<div class="hh">покупайте наших слонов</div>

Ваш ответ

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

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