[解決済み] 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の上にテキストを追加する方法が分かりませんでしたが、残念です。

解決方法は？

斜めの疑似要素を使って、要素の背景を斜めのベタにすることができます。こうすれば、テキストがtransformプロパティの影響を受けることはありません。

transform 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>