Değişken boyutlu div öğelerine sığacak CSS üçgeni

Question

Lütfen benim kemanıma bakın. Bir üçgen oluşturmayı (bir divun içine yerleştirilmek) ve onu tam olarak (köşeden köşeye) uydurmayı amaçlıyordum.

• Yeri tüm div elemanlarının içindeki üçgen: Burada
  özetlenen kurallardır.
• Üçgenin sol alt köşesi, tüm divların içinde sol alt köşeye sığmalıdır.
• Üçgenin sağ üst köşesi, tüm divların içinde sağ üst köşeye sığmalıdır.
• Tanrılar sabit genişlik ve yüksekliğe sahiptir, ancak gerçek hayatta bir ebeveynden miras aldıkları bilinmemektedir.
• Köşegen açısı her div için farklı olacak, ancak bu tamam.
• Sorunu çözmek için kenarlıklar, degradeler, dönüştürme veya SVG kullanın. Tuval veya PNG gibi sabit piksel çözümlerini kullanmak istemem.

.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

onlar kabın boyutunda bir değişiklik dayalı yüzde değerleri alır veya adapte olamaz çünkü border ile bu etkinin dinamik boyutlu konteynerler için mümkün olmayacaktır sağlanması . Sadece piksel veya görüntü birimi kullanabilirler. Her ikisi de dinamik bir konteyner için çok fazla kullanılmaz.

Dönüşümler, kapsayıcının üstüne bir sahte öğe yerleştirerek kullanılabilir, ancak trigonometrik denklemlere dayalı olarak öğenin yüksekliği ve genişliği için hesaplamalar gerekir. Daha basit olanlar, gradyan ve SVG yaklaşımları olacaktır.

kullanma Gradyan:

Sen to [side] [side] sözdizimi ile bir gradyan kullanarak yapabilirsiniz. Bu duyarlı ve tüm konteyner boyutları için çalışacaktır. Tek dezavantajı, bazı durumlarda, genişliğin veya yüksekliğin, diğerine göre çok büyük olduğu bazı durumlarda tırtıklı çizgiler olacağıdır.

Bunun bir avantajı ekstra bir öğeye gerek duymamasıdır (SVG veya HTML, hatta psödo'lar değil), ancak yalnızca üçgen için gezinme ve tıklama efektleri gerektiğinde dezavantajı olacaktır (üçgenin sınırları ile sınırlı) . Öğe hala bir dikdörtgen/kare olduğundan, fare üçgenin dışındayken veya kapsayıcının içinde olduğunda bile, vurgulu veya tıklama efekti tetiklenecektir.

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

---

kullanma SVG:

Ayrıca aşağıda snippet'te gibi SVG path öğesiyle bunu yapabilir. SVG, konteynere göre kesinlikle konumlandırılmalı ve ebeveynin genişliğinin ve boyunun% 100'üne sahip olmalıdır.

Üçgenin gradyanlar için SVG kullanmanın avantajı, vurgulu ve tıklama efektlerinin yalnızca üçgene eklenebileceğidir. gradyan

tarzında

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