CSS Dreieck mit text

Ich habe ein seltsames problem bei der hand, und ich bin kämpfen, um eine Lösung zu finden.

Habe ich einen Dreieck <div> "container" mit nur CSS, aber was ich möchte ist nun, fügen Sie text innerhalb des Containers.

Die Lösung, die ich Strebe hat, um den text enthalten, die innerhalb der Grenzen des Dreiecks, egal wie viel text wird eingefügt, als ich auf der Suche bin thumbnails zu erstellen.

Ein Beispiel finden Sie hier [bitte beachten Sie; dieses Beispiel ist sehr einfach und zeigt nur den Weg habe ich gewählt, um das Dreieck]

Drücken Sie es ein wenig weiter, ich möchte ein Dreieck nach oben und eines nach unten zeigt und der text werden auf der Basis von jedem eins, also für das 1. Dreieck wird der text an der Unterseite und für den 2. an der Spitze, plan B ist nur zum zentrieren Sie den text innerhalb des Dreiecks sowohl vertikal als auch horizontal.

CSS:

.up {
    text-align:right;
    width: 0px;
    height: 0px;
    border-style: inset;
    border-width: 0 100px 173.2px 100px;
    border-color: transparent transparent #007bff transparent;
    float: left;
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

HTML:

<div class="up">
    <p>some information text goes here<p>
</div>
  • Wie kann der text passt sich innerhalb des Dreiecks, wenn das Dreieck hat keine Größe? width: 0px; height: 0px;. Ich würde sagen das ein hack am besten. Sie brauchen, um zu überdenken Sie Ihre Herangehensweise.
  • Sie sagen, Sie wollen den text auf der Basis jedes Dreiecks. Aber Sie sagen auch, Sie wollen es zu sein, die durch das Dreieck, egal, wie viel text da ist? Welches Ergebnis erwartest du? Wenn es 4 Zeilen text, sollte es noch an der Basis mit dem rest verdeckt durch das Dreieck?
InformationsquelleAutor Rron | 2013-02-27
  1. 10

    Für Ihren plan B (zu zentrieren Sie den text innerhalb des Dreiecks sowohl vertikal als auch horizontal), die ich lieber als Lösung, könnte man hinzufügen, diese css-Regel:

    .up p {
    text-align: center;
    top: 80px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}

    Versuchen Sie es hier:

    CSS:

    .up {
  width: 0px;
  height: 0px;
  border-style: inset;
  border-width: 0 100px 173.2px 100px;
  border-color: transparent transparent #007bff transparent;
  float: left;
  transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

.up p {
  text-align: center;
  top: 80px;
  left: -47px;
  position: relative;
  width: 93px;
  height: 93px;
  margin: 0px;
}

    HTML:

    <div class="up">
  <p>some information text goes here
    <p>
</div>

    Blick auf JSFiddle

    • Danke Werner, das ist so ziemlich die Lösung die ich brauchte. sehr einfach, aber sehr effektiv. Noch eine Frage, wenn man so will. Wenn ich overflow:hidden-Attribut es versteckt den text, gehe ich davon aus, dass aufgrund der Fremdheit beteiligten mit den Dimensionen aber gibt es einen Weg wie ich dies überwinden kann, die background-image-Zwecke ich.e ich will das hintergrund Bild zu zeigen, nur innerhalb des Dreiecks?
    • Das problem ist, dass der div-container hat eine Breite und Höhe gleich 0, so dass jedes inner-Objekt wird als überlauf. Aber, wenn Sie nur wollen, um zu verbergen, den überlauf <p>, die unten erscheinen, dann vergeben Sie eine Klasse in Ihrem Absatz-und in der css-Regel und das ist es (look hier). Ich hoffe meine Antwort ist hilfreich für Sie, in diesem Fall Stimme es
    InformationsquelleAutor Guern
Schreibe einen Kommentar