CSS-Dreieck für variable div Elemente

Question

Bitte beziehen Sie sich auf meine Geige. Ich wollte ein Dreieck erstellen (um es in ein div zu setzen) und es genau passend machen (von Ecke zu Ecke).

Hier sind die Regeln beschrieben:

• Legen Sie das Dreieck in den alle div-Elemente.
• Die linke untere Ecke des Dreiecks sollte in allen Divs in die linke untere Ecke passen.
• Die obere rechte Ecke des Dreiecks sollte in allen Divs in die obere rechte Ecke passen.
• Die divs hat feste Breite und Höhe aber im wirklichen Leben sind sie alle unbekannt, von einem Elternteil geerbt.
• Der Winkel der Diagonale wird für jedes Div unterschiedlich sein, aber das ist in Ordnung.
• Verwenden Sie Grenzen, Verläufe, Transform oder SVG, um das Problem zu lösen. Ich möchte keine festen Pixel-Lösungen wie Canvas oder PNG verwenden.

.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

Das Erreichen dieser Effekt mit border nicht für dynamisch großen Behälter möglich sein, weil sie nicht prozentuale Werte annehmen können oder anpassen, die auf einer Änderung der Dimension des Behälters . Sie können nur Pixel- oder Viewport-Einheiten verwenden. Beide würden für einen dynamischen Container nicht viel nutzen.

Transforms können verwendet werden, indem ein Pseudo-Element auf die Container gelegt wird, aber sie würden Berechnungen für Höhe und Breite des Elements basierend auf trigonometrischen Gleichungen benötigen. Die einfacheren wären die Gradienten- und SVG-Ansätze.

Mit Steigung:

Sie können dies mit einem Gradienten mit to [side] [side] Syntax zu tun. Dies ist reaktionsfähig und würde für alle Behältergrößen funktionieren. Der einzige Nachteil ist, dass es in einigen Fällen gezackte Linien geben würde, wo die Breite oder Höhe im Vergleich zu den anderen zu groß ist.

Ein Vorteil davon ist, dass es keine zusätzlichen Elemente (SVG oder HTML, nicht einmal Pseudos) benötigt, aber der Nachteil ist, wenn Hover und Klick-Effekte für das Dreieck allein erforderlich sind (beschränkt auf die Grenzen des Dreiecks) . Da das Element immer noch ein Rechteck/Quadrat ist, wird der Hover- oder Klick-Effekt auch dann ausgelöst, wenn sich die Maus außerhalb des Dreiecks, aber innerhalb des Containers befindet.

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

---

Mit SVG:

Sie es auch wie im folgenden Code-Schnipsel mit SVG path Elemente tun könnten. Die SVG muss absolut in Bezug auf den Container positioniert werden und 100% der Breite und Höhe des Elternteils haben.

Der Vorteil der Verwendung von SVG für das Dreieck über Gradienten besteht darin, dass Hover- und Klickeffekte nur dem Dreieck hinzugefügt werden können.

.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

in Gradienten

Stil

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