CSS DREIECK GENERATOR

Erstelle schnell und einfach CSS-Dreiecke für deine Projekte.

Zudem findest du unterhalb einige Tooltips bzw. Beispiele, wo reine CSS-Dreiecke unter anderem als Pseudoelemente ihr Anwendung finden. (Mit HTML, CSS oder SCSS)

Typ
Gleichschenklig
Gleichseitig
Ungleichseitig
Color in HEX
Width in px
Links
Rechts
Height in px
Oben
Unten
CSS
GEFÄLLT MIR

TOOLTIPS / SPRECHBLASEN, FORMEN

Im Anschluss, wie erwähnt, ein paar Beispiele mit HTML, CSS / SCSS.

Es sind statische Beispiele, solltest du die Snippets nutzen wollen, musst du den Code ggf. für deine Bedürfnisse angepassen.

1 Link mit Info
HTML
<a href="#" class="tooltip_link" data-tooltip-text="Infotext">Link mit Info</a>
CSS
a.tooltip_link {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 110px;
}

a.tooltip_link:before {
    content: attr(data-tooltip-text);
    position: absolute;
    top: -49px;
    left: calc(50% - 49px);
    width: 84px;
    background-color: rgb(235, 29, 54);
    padding: 7px 7px 7px 7px;
    border-radius: 3px;
}

/*CSS Dreieck*/
a.tooltip_link:after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: rgb(235, 29, 54)
    			  transparent
    			  transparent
    			  transparent;
    left: calc(50% - 10px);
    top: -16px;
}
SCSS
a.tooltip_link {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 110px;

    $backgroundcolor: rgb(235, 29, 54);

	&:before {
	    content: attr(data-tooltip-text);
	    position: absolute;
	    top: -49px;
	    left: calc(50% - 49px);
	    width: 84px;
	    background-color: $backgroundcolor;
	    padding: 7px 7px 7px 7px;
	    border-radius: 3px;
	}

	/*CSS Dreieck*/
	&:after {
	    content: "";
	    position: absolute;
	    width: 0px;
	    height: 0px;
	    -webkit-transform: rotate(360deg);
	    border-style: solid;
	    border-width: 10px 10px 0 10px;
	    border-color: $backgroundcolor
	    			  transparent
	    			  transparent
	    			  transparent;
	    left: calc(50% - 10px);
	    top: -16px;
	}
}
2
HTML
<span class="bubble" data-bubble-text="Tolles Beispiel, zeig mir mehr!"></span>
CSS
span.bubble {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(GESICHT);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50%;
}

span.bubble:before {
    content: attr(data-bubble-text);
    position: absolute;
    color: rgb(255, 255, 255);
    top: -79px;
    left: 50px;
    width: 140px;
    height: 40px;
    padding: 20px;
    background: rgb(235, 29, 54);
    border-radius: 30px;
    text-align: center;
}

/*CSS Dreieck*/
span.bubble:after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-style: solid;
    border-width: 18px 10px 0 10px;
    border-color: rgb(235, 29, 54) 
    			  transparent
    			  transparent
    			  transparent;
    left: 48px;
    top: -14px;
}
SCSS
span.bubble {
    position: relative;
	display: block;
	width: 50px;
	height: 50px;
	background-image: url('GESICHT');
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: 50%;

	$backgroundcolor: rgb(235, 29, 54);

	&:before {
		content: attr(data-bubble-text);
		position: absolute;
		color: rgb(255, 255, 255);
		top: -79px;
		left: 50px;
		width: 140px;
		height: 40px;
		background-color: $backgroundcolor;
		padding: 20px;
		border-radius: 300px;
		text-align: center;
	}

	/*CSS Dreieck*/
	&:after {
		content: "";
		position: absolute;
		width: 0px;
		height: 0px;
		-webkit-transform: rotate(360deg);
		transform: rotate(45deg);
		border-style: solid;
		border-width: 18px 10px 0 10px;
		border-color: $backgroundcolor
					  transparent
					  transparent
					  transparent;
		left: 48px;
		top: -14px;
	}
}
3
Schräge Bildunterkante mit einem CSS-Dreieck realisiert, welches durch ein Pseudoelement platziert wurde.
HTML
<div class="content_box">
	<div class="bild"></div>
	<div class="text">Schräge Bildunterkante mit einem CSS-Dreieck realisiert, welches durch ein Pseudoelemente platziert wurde.</div>
</div>
CSS
div.content_box {
    width: 240px;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;
}

div.content_box div.bild {
    height: 130px;
    width: 100%;
    background: linear-gradient(135deg, rgb(235, 29, 54) 1%, rgb(229, 80, 0) 100%);
    position: relative;
}

/*CSS Dreieck*/
div.content_box div.bild:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 0 0 20px 240px;
    border-color: transparent
    			  transparent
    			  rgb(255, 253, 253)
    			  transparent;
}

div.content_box div.text {
    font-size: 16px;
    color: rgb(0, 0, 0);
    padding: 20px;
    line-height: 1.4;
    background-color: rgb(255, 255, 255);
}
SCSS
div.content_box {
    width: 240px;
    background-color: rgb(255, 255, 255);
    border-radius: 3px;

	div.bild {
	    height: 130px;
	    width: 100%;
	    background: linear-gradient(135deg, rgb(235, 29, 54) 1%, rgb(229, 80, 0) 100%);
	    position: relative;

		/*CSS Dreieck*/
		&:after {
		    content: "";
		    position: absolute;
		    bottom: 0;
		    left: 0;
		    width: 0px;
		    height: 0px;
		    -webkit-transform: rotate(360deg);
		    border-style: solid;
		    border-width: 0 0 20px 240px;
		    border-color: transparent
		    			  transparent
		    			  rgb(255, 253, 253)
		    			  transparent;
		}
	}

	div.text {
	    font-size: 16px;
	    color: rgb(0, 0, 0);
	    padding: 20px;
	    line-height: 1.4;
	    background-color: rgb(255, 255, 255);
	}
}
4
DA LANG!
HTML
<div class="arrow">DA LANG!</div>
CSS
div.arrow {
    position: relative;
    background-color: rgb(235, 29, 54);
    height: 40px;
    width: 120px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: rgb(255, 255, 255);
    line-height: 40px;
    padding: 0 0 0 20px;
}

/*CSS Dreieck*/
div.arrow:before {
    content: "";
    position: absolute;
    top: 0;
    right: -20px;
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 20px 0 20px 20px;
    border-color: transparent
    			  transparent
    			  transparent
    			  rgb(235, 29, 54);
}

/*CSS Dreieck*/
div.arrow:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 20px 0 20px 20px;
    border-color: transparent
    			  transparent
    			  transparent
    			  rgb(30, 30, 30);
}
SCSS
div.arrow {
	$arrowcolor: rgb(235, 29, 54);
    position: relative;
    background-color: $arrowcolor;
    height: 40px;
    width: 120px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: rgb(255, 255, 255);
    line-height: 40px;
    padding: 0 0 0 20px;

	/*CSS Dreieck*/
	&:before {
	    content: "";
	    position: absolute;
	    top: 0;
	    right: -20px;
	    width: 0px;
	    height: 0px;
	    -webkit-transform: rotate(360deg);
	    border-style: solid;
	    border-width: 20px 0 20px 20px;
	    border-color: transparent
	    			  transparent
	    			  transparent
	    			  $arrowcolor;
	}

	/*CSS Dreieck*/
	&:after {
	    content: "";
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 0px;
	    height: 0px;
	    -webkit-transform: rotate(360deg);
	    border-style: solid;
	    border-width: 20px 0 20px 20px;
	    border-color: transparent
	    			  transparent
	    			  transparent
	    			  rgb(30, 30, 30);
	}
}
5
HTML
<div class="pacman"></div>
CSS
div.pacman {
    position: relative;
    width: 120px;
    height: 120px;
    background-color: rgb(255, 193, 7);
    border-radius: 60px;
}

div.pacman:before {
    content: "";
    position: absolute;
    right: -10px;
    top: calc(50% - 10px);
    width: 20px;
    height: 20px;
    background-color: rgb(214, 186, 104);
    border-radius: 10px;
    z-index: 1;
}

/*CSS Dreieck*/
div.pacman:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 0px;
    height: 0px;
    -webkit-transform: rotate(360deg);
    border-style: solid;
    border-width: 60px 60px 60px 0;
    border-color: transparent
    			  rgb(30, 30, 30)
    			  transparent
    			  transparent;
}
SCSS
div.pacman {
    position: relative;
    width: 120px;
    height: 120px;
    background-color: rgb(255, 193, 7);
    border-radius: 60px;

	&:before {
	    content: "";
	    position: absolute;
	    right: -10px;
	    top: calc(50% - 10px);
	    width: 20px;
	    height: 20px;
	    background-color: rgb(214, 186, 104);
	    border-radius: 10px;
	    z-index: 1;
	}

	/*CSS Dreieck*/
	&:after {
	    content: "";
	    position: absolute;
	    top: 0px;
	    right: 0px;
	    width: 0px;
	    height: 0px;
	    -webkit-transform: rotate(360deg);
	    border-style: solid;
	    border-width: 60px 60px 60px 0;
	    border-color: transparent
	    			  rgb(30, 30, 30)
	    			  transparent
	    			  transparent;
	}
}