Dreieck im CSS innerhalb einer box

Naja, ich weiß nicht, wie zu erklären, es richtig. Hier, schauen Sie in diesem screenshot hat, was ich machen will. Meine designer Gaben mir diese. Wenn ich nicht eine Lösung finde werde ich die Bilder benutzen und keinen code. Ist es möglich, mit CSS3?

Hier ist das Bild

Dreieck im CSS innerhalb einer box

Sehen, das Dreieck im inneren dieser box? Ich möchte, dies zu tun. Danke!

  • Es ist möglich, aber nicht sehr hübsch... ich gehe hack etwas.
  • Ich bin Abstimmungen ein öffnen auf diese Frage, wenn diese Art von Fragen nicht erlaubt ist, die wir nicht haben können alle "wie kann ich erreichen, komplexe Wirkung X in CSS" - Fragen überhaupt während diese sind oft die interessantesten, zu entdecken, tricks wie ich unten gezeigt. Wenn Sie nicht wissen border wie das funktioniert in Ecken, die Sie nie denken, der es selbst.
  • Sie können auch überprüfen, diese Frage : stackoverflow.com/questions/23758922/...
InformationsquelleAutor | 2013-10-05
  1. 10

    Kreative Nutzung von Grenzen um diesen Effekt zu erreichen, wurden keine Bilder zugefügt in der folgenden Beispiel-und Sie können auch die position der Pfeil auf dem element selbst - wird mehr überschaubar, wenn Sie können hartcodieren für Ihr design.

    HTML

    <div class="top">
    <span class="arrow" style="left:40%"></span>
</div>

    CSS

    .top {
    background:url(http://blog.positscience.com/wp-content/uploads/2013/08/ice-cream3.jpg);
    background-size:cover;
    width:300px;
    height:300px;
    border:1px solid #888;
    position:relative;
    overflow:hidden;
}
.arrow {
    border:30px solid #aaa;
    border-bottom:none;
    border-color:transparent #aaa transparent #aaa;
    position:absolute;
    left:0;
    bottom:0;
}
.arrow:before, .arrow:after {
    content:'';
    position:absolute;
    width:5000px;
    bottom:0;
    height:30px;
    background:#aaa;
}
.arrow:before {
    right:30px;
}
.arrow:after {
    left:30px;
}

    Arbeiten JSfiddle-Beispiel.

    Oder die voll integrierte sample hier.

    • +1 ordentlich und schnell 🙂
    • +1 arbeitete wie ein Charme! Sie sind toll!
    InformationsquelleAutor Niels Keurentjes
Schreibe einen Kommentar