Создайте наклонный край для div

Я пытаюсь создать наклонный div, и везде, где я смотрел, я только что нашел, как это сделать, используя границу каких-то родов, которая не будет работать, потому что div будет размещаться над верхней частью изображения.

Итак, код на данный момент выглядит следующим образом: Bootstrap:

<div class="thumbnail">
    <a href="#">
        <img class="img-responsive" src="banner.jpg">
        <h3 class="headline-badge">slanted div text</h3>
    </a>
</div>

И это соответствующий CSS:

.thumbnail img.img-responsive {
    width: 100%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.headline-badge {
    color: #fff;
    margin-top: 0;
    padding: 2%;
    position: absolute; 
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: #000;
}

Итак, я хочу создать наклон в верхнем правом углу. Я пробовал использовать границу с небольшим или никаким успехом, и всякий раз, когда я пытался сделать прозрачную границу, она не отображала границу.

Есть ли у кого-нибудь идеи о том, как создать это с помощью CSS? Я считаю, что он также должен быть отзывчивым, что является серьезной проблемой, поскольку наклон не может быть просто фиксированной высотой/шириной.

Наклон должен быть около 45 градусов, и только с правой стороны div. Текст не должен выполняться наклонным.

Эффект должен быть похож на этот:

http://jsfiddle.net/webtiki/yLu1sxmj/

Спасибо за публикацию этой скрипки, но мне нужно на самом деле добавить текст в div, и ваше решение затрудняет это, как показывают комментарии в ответе. Наклон также должен был бы наклон вверх, а не вниз, и я изо всех сил старался сделать это, не воздействуя на левую часть div. В вашем примере я не мог понять, как добавить текст поверх div, хотя я боюсь.

Ответы

Ответ 1

Вы можете использовать перекошенный псевдоэлемент, чтобы сделать наклонный сплошной фон вашего элемента. Таким образом, свойство transform не будет влиять на текст.

Свойство origin origin позволяет перекосить псевдоэлемент из правого нижнего угла, а части переполнения скрыты с помощью overflow:hidden;.

Псевдоэлемент укладывается за содержимое div с отрицательным z-index:

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

body {
  background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');
  background-size: cover;
}
<div>slanted div text</div>
<div>
  slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>

Ответ 2

Я думаю, вы пытаетесь добавить наклон для баннера или простой области щелчка. Предложение, которое я дам, связано с тем, как это делают основные веб-сайты, такие как amazon и google. Это выглядит так:

Создайте векторное изображение, у которого есть наклон, который вы хотите, где он покрывает долю div, который вы хотите. Затем, когда вы добавляете его в качестве наложения, вы можете установить его как положение: абсолютное с z-индексом больше чем что-либо в div.

Это значительно сократит обработку, и кэшированное изображение будет загружаться так быстро, как css. Это также предотвратит проблемы с перекрестным браузером.

Надеюсь, это поможет.

PS: векторные изображения re size красиво, поэтому вам не нужно беспокоиться о пикселизации и что-то в этом роде.

Ответ 3

**background-image: -webkit-linear-gradient(130deg, rgba(113, 182, 46, .6) 78%, rgba(0, 0, 0, 0) 0%);**

Ответ 5

Проблема с принятым ответом состоит в том, что он не работает, когда у вас есть изображение в качестве фона родительского элемента. Вместо этого я использовал встроенный фон SVG.

Html

    <div class="parent">
      <div class="slanted">
         I have a slanted edge
     </div>
   </div>

Css

    .parent {
              background-image: url('http://lorempixel.com/600/350');
              background-size: cover;
              background-position: center center;
              padding: 100px;
     }

    .slanted {
                color: white;
                background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg'  preserveAspectRatio='none'><polygon points='0,300 0,0 150,0 300,300' width='100%' height='100%' style='fill:blue;'/></svg>");
                background-size:contain;
                width: 30%;
                font-size: 2em;
                padding: 4px 40px;
   }

Примечание: вам, возможно, придется немного поиграться с svg, высотой и шириной. Принятый ответ должен работать в большинстве случаев. Это не сработало для меня, потому что у меня был родительский элемент с фоном изображения.

Вот некоторые ресурсы по тегу svg:

https://www.w3schools.com/graphics/svg_intro.asp

https://developer.mozilla.org/en-US/docs/Web/SVG

https://www.w3schools.com/graphics/svg_polygon.asp