web-dev-qa-db-ja.com

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の上にテキストを追加する方法を理解できませんでした。

htmlcsscss-shapes
19
germainelol

斜めの擬似要素を使用して、要素の斜めの背景を作成できます。この方法では、テキストはtransformプロパティの影響を受けません。

Originプロパティの変換により、擬似要素を右下隅から傾けることができ、オーバーフローウィング部分はoverflow:hidden;で非表示になります。

擬似要素は、負のz-indexでdivのコンテンツの背後に積み重ねられます：

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>
36
web-tiki

バナーまたはシンプルなクリック領域に傾斜を追加しようとしていると思います。アマゾンやグーグルのような主要なウェブサイトがどのようにそれを行うかから、私が与えるだろう提案は来ます。次のとおりです。

希望するdivの割合をカバーする場所で、希望する傾斜を持つベクター画像を作成します。次に、オーバーレイとして追加するときに、div内の何よりも大きいz-indexでposition：absoluteとして設定できます。

これにより、処理が大幅に削減され、キャッシュされたイメージはcssと同じ速さでロードされます。これにより、クロスブラウザの問題も防止されます。

これがお役に立てば幸いです。

PS：ベクトル画像はきれいにサイズ変更されるので、ピクセル化やそのようなことを心配する必要はありません。

2
user3842346

これは、CSS clip-path（および-webkit-clip-path）を使用して簡単に実現できます。

ここの例

また、最小限の手間でCSSコードを生成する この便利なツール を見つけました。

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

受け入れられた答えの問題は、親要素の背景として画像がある場合には機能しないことです。代わりにインライン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

0
daniekpo