Dreieckige Kanten auf Webseiten sind immer noch durchscheinend. Die heutigen Designer werden immer besser, und CSS muss mithalten.

Anforderungen

Ich habe heute in der Gruppe eine Anfrage gesehen, wie man ein solches Dreieck mit fehlenden Ecken und einem durchscheinenden Schatten erstellen kann.

Analyse

Um dies zu erreichen, können Sie mithilfe von CSS ein Dreieck erstellen. Finden Sie den Code wie folgt online.

Da ich noch nie versucht habe, ob der Rand transparent sein kann, muss ich es testen.

Dann testen wir, ob Rot durch RGBA ersetzt werden kann. Wenn ja, ist die halbe Miete gewonnen.

Nach einem einfachen Test funktioniert es tatsächlich.

.sanjiao
{
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid rgba(0,0,0,.5) ;
Rand links: 100 Pixel durchgehend transparent;
}

Der nächste Schritt besteht darin, ein weißes, etwas kleineres Dreieck in das Schattendreieck einzufügen.

Leistung

<div style="background: url(http://uploads.xuexila.com/allimg/1608/704-160P9224Z4.jpg);
	width: 900px; height: 300px; padding-top: 20px;" class="bg">
	<div class="sanjiao">
		<div class="sanjiaobai">
		</div>
	</div>
</div>
<style>
	.sanjiao
	{
		position: relative;
		width: 0;
		height: 0;
		border-bottom: 100px solid rgba(0,0,0,.5);
		border-left: 100px solid transparent;
	}
	.sanjiaobai
	{
		position: absolute;
		right: 0;
		top: 20px;
		width: 0;
		height: 0;
		border-bottom: 80px solid #fff;
		border-left: 80px solid transparent;
	}
</style>

　

An diesem Punkt ist das Div mit fehlenden Ecken und Schatten fertig. Das Füllen eines weißen Divs auf der rechten Seite und des normalen rechteckigen Divs unten wird hier nicht mehr implementiert.