可変サイズdiv要素にフィットするCSS三角形

Question

私のフィドルを参照してください。私は三角形（div内に配置）を作成し、それを正確に（コーナーからコーナーに）フィットさせることを目指していました。ここで

概説ルールです：

• プレイスには、すべてのdiv要素内の三角形。
• 三角形の左下隅は、すべてのdiv内の左下隅に収まる必要があります。
• 三角形の右上隅は、すべてのdiv内の右上隅に一致する必要があります。
• divには幅と高さが固定されていますが、実生活ではすべてが未知で親から継承されています。
• 対角の角度はすべてのdivで異なりますが、それは問題ありません。
• 問題を解決するには、境界線、グラデーション、変換、またはSVGを使用します。私は、キャンバスやPNGのような固定ピクセルソリューションを使用したくありません。

.one { 
 
    width: 100px; 
 
    /* Unknown */ 
 
    height: 30px; 
 
    /* Unknown */ 
 
    background: #ccc; 
 
} 
 
.two { 
 
    width: 40px; 
 
    /* Unknown */ 
 
    height: 90px; 
 
    /* Unknown */ 
 
    background: #aaa; 
 
} 
 
.three { 
 
    width: 70px; 
 
    /* Unknown */ 
 
    height: 70px; 
 
    /* Unknown */ 
 
    background: #aaa; 
 
} 
 
.triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 0 0 50px 50px; 
 
    border-color: transparent transparent #007bff transparent; 
 
}

<div class="one"></div> 
 
<br> 
 
<div class="two"></div> 
 
<br> 
 
<div class="three"></div> 
 
<br> 
 

 
<div class="triangle"></div>

JSFiddle Reference

Answer 1

彼らはパーセント値を取るか、またはコンテナの寸法の変化に基づいて適応することができないのでborderでこの効果を達成することは動的にサイズのコンテナ用できなくなります。ピクセル単位またはビューポート単位のみを使用できます。どちらも動的なコンテナにはあまり役に立ちません。

変換は、コンテナの上に擬似要素を配置することによって使用できますが、三角式に基づいて要素の高さと幅の計算が必要です。より単純なものは、グラジエントとSVGアプローチです。

使用グラデーション：

あなたはto [side] [side]構文で勾配を用いてこれを行うことができます。これは応答性が高く、すべてのコンテナサイズで機能します。唯一の欠点は、幅や高さが他のものに比べて大きすぎる場合があるギザギザの線があることです。

これは、余分な要素（SVGまたはHTML、擬似ではない）を必要としないという利点がありますが、三角形だけではホバーとクリックの効果が必要な場合（三角形の境界線に限定されます） 。要素は依然として矩形/四角形なので、マウスが三角形の外側であるがコンテナ内にあっても、ホバーまたはクリックエフェクトがトリガーされます。

.one { 
 
    width: 100px; 
 
    height: 30px; 
 
    background-color: #ccc; 
 
} 
 
.two { 
 
    width: 40px; 
 
    height: 90px; 
 
    background-color: #aaa; 
 
} 
 
.three { 
 
    width: 70px; 
 
    height: 70px; 
 
    background-color: #aaa; 
 
} 
 
div { 
 
    background-image: linear-gradient(to top left, blue 50%, transparent 51%); 
 
}

<div class="one"></div> 
 
<br> 
 
<div class="two"></div> 
 
<br> 
 
<div class="three"></div> 
 
<br>

---

使用SVG：

あなたはまた、以下のスニペットのようにSVG path要素でそれを行うことができます。 SVGは、コンテナに対して絶対的に配置され、親の幅と高さの100％を持たなければなりません。

グラデーション上の三角形に対してSVGを使用する利点は、ホバーとクリックの効果を三角形だけに追加できることです。勾配

スタイルで

.one { 
 
    width: 100px; 
 
    height: 30px; 
 
    background-color: #ccc; 
 
} 
 
.two { 
 
    width: 40px; 
 
    height: 90px; 
 
    background-color: #aaa; 
 
} 
 
.three { 
 
    width: 70px; 
 
    height: 70px; 
 
    background-color: #aaa; 
 
} 
 

 
div{ 
 
    position: relative; 
 
} 
 
div > svg { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
svg path{ 
 
    fill: #0007bf; 
 
} 
 
svg path:hover{ 
 
    fill: crimson; 
 
}

<div class="one"> 
 
    <svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <path d='M100,0 L100,100 0,100z' /> 
 
    </svg> 
 
</div> 
 
<br> 
 
<div class="two"> 
 
    <svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <path d='M100,0 L100,100 0,100z' /> 
 
    </svg> 
 
</div> 
 
<br> 
 
<div class="three"> 
 
    <svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <path d='M100,0 L100,100 0,100z' /> 
 
    </svg> 
 
</div> 
 
<br>

Answer 2

.triangle { 
width: 100%; 
height: 100%; 
background: linear-gradient(to bottom right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, #007bff 50%, #007bff 100%) 
} 

HTML

<div class="one"> 
    <div class="triangle"></div> 
</div><br> 
<div class="two"> 
    <div class="triangle"></div> 
</div><br> 
<div class="three"> 
    <div class="triangle"></div> 
</div>