web-dev-qa-db-ja.com

CSS対角div背景

私が開発しているWebサイトの場合、divに斜めの境界線を含める必要があります。これらは私が再作成する必要がある主な例です。

二重対角線の上部境界線、三角形

これを達成する方法についてウェブをスカウトしていて、私の最初の考えも::before。しかし、ページ全体をめちゃくちゃにする絶対位置に配置しないと、機能しません。

これは私がこのようなことを達成しようとした私のコードです：

.slider-container{
  background-color: $blue;
  width: 100%;
  overflow: hidden;
  position: relative;
  .col-md-3{
    img{
      padding: 40px;
      width: 100%;
      max-width: 400px;
      margin: auto;
    }
  }
  &::before {
    background: red;
    bottom: 100%;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    transform-Origin: 100% 100%;
    transform: rotate(-15deg);
    width: 150%;
  }
}
<section id="slider">
    <div class="container-fluid">
        <div class="row slider-container">
            <div class="col-md-3">
                <p>imgae 1</p>
            </div>
            <div class="col-md-3">
                <p>imgae 2</p>
            </div>
            <div class="col-md-3">
                <p>imgae 3</p>
            </div>
            <div class="col-md-3">
                <p>imgae 4</p>
            </div>
        </div>
    </div>
</section>

注：ここでは機能しませんが、これは私が取得する結果です result

htmlcssdiagonal
6
Gurbii

ちょうどCSSとあなたのdivsサイズに基づいて少し微調整すると、次のようなものを作成できます：

.myclass {
width: 100px;
height: 100px;
background: linear-gradient(45deg, black 0%, black 26%, transparent 26%), linear-gradient(-45deg, black 0%, black 27%, transparent 27%)
}

.myclass2 {
width: 100px;
height: 100px;
background: linear-gradient(-45deg, blue 0%, blue 27%, transparent 27%), linear-gradient(45deg, blue 0%, blue 26%, red 26%)
}
With transparency:
<div class="myclass">My content here</div>
<br/>
Not as easy with transparent:
<div class="myclass2">My content here</div>

編集：これをChromeでテストしたところ、古い/他のブラウザーには特別な線形グラデーションが必要になる場合があります。

5
Morfium

これを実現する最も簡単な方法は、背景の画像を使用することでしょう。ただし、小さなデバイスでは効果に一貫性がない場合があります。このため、ハードストップグラディエントの使用を検討してください。

.grad {
  background: lightblue; /* For browsers that don't support gradients */
  background: -webkit-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: -o-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: -moz-linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  background: linear-gradient(170deg, white 0%, white, 15%, lightblue 15%, lightblue 100%);
  width: 100%;
  padding: 20px;
}
<div class="grad">
  <h1>Hard-stop gradient</h1>
  <p>Using this type of gradient, you can create an angled background without using a background image.</p>
</div>

これを使用して、両端が白の0％から15％までのグラデーションを作成し、続いて完全に黒の15％から100％までのグラデーションを作成できます。これにより、フェード効果が完全に取り除かれ、斜めの背景が得られます。 CSSを1行だけ必要とするため、おそらく最も効率的な方法でもあります。

4
natejms
.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid green;
  border-bottom: 60px solid transparent;

  border-left: 60px solid green;
}
0
Alberto Martínez

このようなもの？

div {
  background: yellow;
  height: 150px;
  overflow: hidden;
  position: relative;
  width: 300px;
}

div::before {
  background: red;
  bottom: 100%;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  right: 0;
  transform-Origin: 100% 100%;
  transform: rotate(-15deg);
  width: 150%;
}
<div></div>
0
Sam