web-dev-qa-db-ja.com

CSSを使用してdiv背景に斜めの線を描く

プレビューボックスのdivがあります。

HTML：

<div class="preview-content">PREVIEW</div>

CSS：

.preview-content {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
    width: 100%;
    min-height: 300px;
    max-height: 300px;
    line-height: 300px;
    text-align: center;
    vertical-align: middle;
     font-size: 2em;
}

質問：画像のようにdiv背景に斜めの線を追加する方法は？

注：可能な場合のみCSSを使用

preview

前もって感謝します。

cssbackgroundlinecss-shapesdiagonal
42
Ing. Michal Hudak

次のようなことができます：

<style>
    .background {
        background-color: #BCBCBC;
        width: 100px;
        height: 50px;
        padding: 0; 
        margin: 0
    }
    .line1 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid red;
        -webkit-transform:
            translateY(-20px)
            translateX(5px)
            rotate(27deg); 
        position: absolute;
        /* top: -20px; */
    }
    .line2 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid green;
        -webkit-transform:
            translateY(20px)
            translateX(5px)
            rotate(-26deg);
        position: absolute;
        top: -33px;
        left: -13px;
    }
</style>
<div class="background">
    <div class="line1"></div>
    <div class="line2"></div>
</div>

jsfiddle です。

目的に合わせて answer の改良版。

25
AxelPAL

要素の寸法に自動的に拡大縮小するほぼ完璧なソリューションは、次に示すように、calc（）に接続されたCSS3 linear-gradientを使用することです。主な欠点はもちろん互換性です。以下のコードはFirefox 25およびExplorer 10および11で機能しますが、Chrome（v30およびv32 devをテストしました）では、行が狭すぎると行が消えるという微妙な問題があります。さらに、消えるかどうかはボックスの寸法に依存します。以下のスタイルはdiv { width: 100px; height: 100px}で機能しますが、テストではdiv { width: 200px; height: 200px}計算で少なくとも0.8pxに置き換える必要がある1.1048507095pxで失敗します対角線が表示されても、ラインレンダリングの品質は非常に劣ります。このChromeバグがまもなく解決されることを期待しましょう。

.crossed {
     background: 
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%),
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%);
}
<textarea class="crossed"></textarea>
91
RobertT

SVGを使用して線を描画できます。

.diag {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M1 0 L0 1 L99 100 L100 99' fill='black' /><path d='M0 99 L99 0 L100 1 L1 100' fill='black' /></svg>");
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 100% 100%, auto;
}
<div class="diag" style="width: 300px; height: 100px;"></div>

ここでプレイしてください： http://jsfiddle.net/tyw7vkvm

18
intrepidis

この3年前の質問に対する他のすべての回答には、CSS3（またはSVG）が必要です。ただし、古いCSS2を不完全にしか使用せずに行うこともできます。

.crossed {
    position: relative;
    width: 300px;
    height: 300px;
}

.crossed:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    bottom: 1px;
    border-width: 149px;
    border-style: solid;
    border-color: black white;
}

.crossed:after {
    content: '';
    position: absolute;
    left: 1px;
    right: 1px;
    top: 0;
    bottom: 0;
    border-width: 149px;
    border-style: solid;
    border-color: white transparent;
}
<div class='crossed'></div>

要求通りの説明：

実際に斜めの線を描くのではなく、これらの線を見たい場所に隣接するいわゆる負の空間三角形に色を付けることができます。これを達成するために私が思いついたトリックは、マルチカラーのCSSボーダーが斜めに面取りされているという事実を利用しています。

.borders {
    width: 200px;
    height: 100px;
    background-color: black;
    border-width: 40px;
    border-style: solid;
    border-color: red blue green yellow;
}
<div class='borders'></div>

物事を望みどおりにするには、寸法0とLINE_THICKNESSピクセルの内側の長方形を選択し、それらの寸法が逆の別の長方形を選択します。

.r1 { width: 10px;
      height: 0;
      border-width: 40px;
      border-style: solid;
      border-color: red blue;
      margin-bottom: 10px; }
.r2 { width: 0;
      height: 10px;
      border-width: 40px;
      border-style: solid;
      border-color: blue transparent; }
<div class='r1'></div><div class='r2'></div>

最後に、:beforeおよび:after擬似セレクターを使用して、上記の両方の長方形の境界線を選択したHTML要素に互いの上に挿入するための適切な方法として、相対/絶対位置を設定します。対角線の十字を生成します。 1pxなどの細いLINE_THICKNESS値で結果がおそらく最もよく見えることに注意してください。

14
Will

以下を確認してください。

<canvas id="myCanvas" width="200" height="100"></canvas>
<div id="mydiv"></div>

JS：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle="red";
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

CSS：

html, body { 
  margin: 0;
  padding: 0;
}

#myCanvas {
  padding: 0;
  margin: 0;
  width: 200px;
  height: 100px;
}

#mydiv {
  position: absolute;
  left: 0px;
  right: 0;
  height: 102px;
  width: 202px;
  background: rgba(255,255,255,0);
  padding: 0;
  margin: 0;
}

jsfiddle

5
Saritha.S.R

cSS3変換プロパティを使用できます。

div
{
transform:rotate(Xdeg);
-ms-transform:rotate(Xdeg); /* IE 9 */
-webkit-transform:rotate(Xdeg); /* Safari and Chrome */
}

Xdeg =あなたの価値

例えば...

さらにdivを作成し、z-indexプロパティを使用できます。だから、ラインでdivを作成し、それを回転させます。

2
Reverter

intrepidis 'answer CSSでバックグラウンドSVGを使用するこのページでは、SVGが<path>sを使用してスケーリングしないため、サイズやアスペクト比に合わせてスケーリングできるという利点があります。まあ。

<line>の代わりに<path>を使用するようにSVGコードを更新し、non-scaling-strokevector-effect を追加して、コンテナでのストロークのスケーリングを防止しました。

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'>
  <line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/>
  <line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/>
</svg>

元の回答からCSSにドロップされたものを次に示します（HTMLをサイズ変更可能にした）。

.diag {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><line x1='0' y1='0' x2='100' y2='100' stroke='black' vector-effect='non-scaling-stroke'/><line x1='0' y1='100' x2='100' y2='0' stroke='black' vector-effect='non-scaling-stroke'/></svg>");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%, auto;
}
<div class="diag" style="width: 200px; height: 150px; border: 1px solid; resize: both; overflow: auto"></div>
0
Shaw

十字架を部分的に透明にしたい場合、単純なアプローチはlinear-gradient色を半透明にすることです。しかし、交差点でのアルファブレンディングのためにうまく機能せず、異なる色のダイヤモンドが生成されます。これに対する解決策は、色をそのままにして、代わりにグラデーションコンテナに透明度を追加することです。

.cross {
  position: relative;
}
.cross::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

.cross1::after {
  background:
    linear-gradient(to top left, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, rgba(255,0,0,0.35) 46%, rgba(255,0,0,0.35) 54%, transparent 55%);
}

.cross2::after {
  background:
    linear-gradient(to top left, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%),
    linear-gradient(to top right, transparent 45%, rgb(255,0,0) 46%, rgb(255,0,0) 54%, transparent 55%);
  opacity: 0.35;
}

div { width: 180px; text-align: justify; display: inline-block; margin: 20px; }
<div class="cross cross1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>

<div class="cross cross2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et dui imperdiet, dapibus augue quis, molestie libero. Cras nisi leo, sollicitudin nec eros vel, finibus laoreet nulla. Ut sit amet leo dui. Praesent rutrum rhoncus mauris ac ornare. Donec in accumsan turpis, pharetra eleifend lorem. Ut vitae aliquet mi, id cursus purus.</div>
0
user