Spitz/abgewinkelt Pfeil-Stil die Grenzen von CSS

Ich habe ein breadcrumb-Menü und versuchen, es zu tun in reinem CSS, damit ich nicht in ein hintergrund-Bild, um einen Pfeil-Form. Ist es möglich, dies zu erreichen, abgewinkelt border-style mit reinem CSS?

Die besten, die ich in der Lage gewesen, das zu tun sieht so aus (dies ist nur ein Entwurf screenshot habe ich vor einer Weile gemacht, so ignorieren Sie bitte, dass es impliziert, dass breadcrumbs sind Obst und/oder lecker):

Spitz/abgewinkelt Pfeil-Stil die Grenzen von CSS

Ich war erreichen ist es mit CSS so:

.breadcrumb li {
    border-right: 2px solid #ECECEC;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}

Hier ist die ganze CSS, falls es hilft:

div.breadcrumb {
    display: block;
    float: left;
    border-bottom: 2px solid gray;
}
ul.breadcrumb {
    display: block;
    float: left;
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
.breadcrumb li {
    float: left;
    display: list-item;
    background-color: #F2F2F2;
    border-right: 2px solid #ECECEC;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
    position: relative;
    padding: 9px 20px 10px 35px;
    margin-left: -32px;
}
.breadcrumb li.first-crumb {
    background: #E7E7E7;
    padding-left: 20px;
    margin-left: 0px;
}
.breadcrumb li.last-crumb {
    border-top: 1px solid #E3E3E3;
    border-right: 1px solid #E3E3E3;
    background: white;
    padding-top: 9px;
    padding-bottom: 9px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.breadcrumb li:not(.first-crumb) {
    padding-left: 45px;
}
.breadcrumb li:not(.last-crumb) a:after {
    content: "\27F6";
    margin-left: 10px;
    color: #444444;
    margin-right: 0px;
}
.breadcrumb li a,
.breadcrumb li span {
    display: block;
    float: left;
    position: relative;
}
.breadcrumb li a {
    text-decoration: none;
}
.breadcrumb li.first-crumb a {
    padding-left: 0px;
    margin-left: 0px;
}

Mein markup sieht wie folgt aus:

<div class="breadcrumb">
    <ul class="breadcrumb">
        <li class="breadcrumb first-crumb"><a href="#">Produce</a></li>
        <li class="breadcrumb"><a href="#">Fruits</a></li>
        <li class="breadcrumb last-crumb"><span>breadcrumb-ilicious!</span></li>
    </ul>
</div>

Bearbeiten: Es wäre schön, wenn ich könnte es zu schauen, wie es ist, eine tatsächliche Grenze zu. Dies ist meine feuchten skitch es:

Spitz/abgewinkelt Pfeil-Stil die Grenzen von CSS

(Ich habe versucht, das hinzufügen mehrerer Dreiecke pro Olaf ' s Vorschlag, und das einzige, was ich konnte nicht arbeiten, war die Korrektur der offensichtlichen Lücke zwischen zwei Dreiecken ohne änderung der Winkel des Dreiecks zu Stossen, um die Einfassung.)

Spitz/abgewinkelt Pfeil-Stil die Grenzen von CSS

InformationsquelleAutor 2rs2ts | 2013-11-01

Diebstahl aus CSS-Tricks CSS-Dreieck, können Sie etwas tun, wie

li.breadcrumb:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 20px solid #eee;
    border-bottom: 20px solid #eee;
    border-left: 20px solid #ccc;
}

CSS:

li.breadcrumb:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 20px solid #eee;
    border-bottom: 20px solid #eee;
    border-left: 20px solid #ccc;
}
li.first-crumb:after {
    border-top: 20px solid #ccc;
    border-bottom: 20px solid #ccc;
    border-left: 20px solid #aaa;
}
li.last-crumb:after {
    border-top: 20px solid #fff;
    border-bottom: 20px solid #fff;
    border-left: 20px solid #eee;
}

li.breadcrumb {
    list-style-type: none;
    background-color: #ccc;
    display: inline-block;
    float: left;
    line-height: 0;
}
li.first-crumb {
    background: #aaa;
}
li.last-crumb {
    background: #eee;
}
li.breadcrumb a {
    text-decoration: none;
}

HTML:

<div class="breadcrumb">
    <ul class="breadcrumb">
        <li class="breadcrumb first-crumb"><a href="#">Hurr</a>
        </li>
        <li class="breadcrumb"><a href="#">Durr</a>
        </li>
        <li class="breadcrumb last-crumb"><span>Furr</span>
        </li>
    </ul>
</div>
<div class="arrow-right"></div>

Original JSFiddle

Ich sah immer wieder diesen link aber wenn ich es benutzt habe, ich habe Trapeze, wahrscheinlich wegen meiner margin/padding-Einstellungen auf die lis. Ich habe versucht, einige der divs innerhalb der lis und geben Sie die Dreieck-Klassen, aber ich habe Probleme mit der Positionierung auch dann. Danke für den link, obwohl, zumindest verstärkt, daß ich unter diesem Ansatz.
Ich habe auch versucht, die div.right-triangle innen li erste, finden Sie unter jsfiddle.net/P3yKr/4. Aber mit :after ist dies die elegantere Lösung. Wenn Sie hinzufügen Polsterung um li es sieht aus wie ein Rahmen um das Dreieck.
Ich finde beide Lösungen gut Aussehen. Natürlich habe ich mit ihm zu arbeiten.
Genau das, was ich brauchte, danke.

InformationsquelleAutor Olaf Dietsche

sich diese Grenzen auch, wenn Sie wollen (ich habe verbessert die Vorherige Antwort von Olaf Dietsche):

HTML:

<div class="breadcrumb">
    <ul class="breadcrumb">
        <li class="breadcrumb first-crumb"><a href="#">Hurr</a></li>
        <li class="breadcrumb"><a href="#">Durr</a></li>
        <li class="breadcrumb last-crumb"><span>Furr</span></li>
    </ul>
</div>

CSS:

li.breadcrumb:before {
    content:'';
    width: 28.28427px; /* sqrt(40*40 /2) */
    height: 28.28427px;
    background:transparent;
    position:absolute;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    transform-origin: top right;
    top: 20px;
    margin:0;
    right: 0;
    border-right: #000 solid 1px;
    border-top: #000 solid 1px;
}

li.breadcrumb:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 20px solid #eee;
    border-bottom: 20px solid #eee;
    border-left: 20px solid #ccc;
}
li.first-crumb:after {
    border-top: 20px solid #ccc;
    border-bottom: 20px solid #ccc;
    border-left: 20px solid #aaa;
}
li.last-crumb:after {
    border-top: 20px solid #fff;
    border-bottom: 20px solid #fff;
    border-left: 20px solid #eee;
}

li.breadcrumb {
    list-style-type: none;
    background-color: #ccc;
    display: inline-block;
    float: left;
    line-height: 0;
    position: relative;
    height: 40px;
}
li.first-crumb {
    background: #aaa;
}
li.last-crumb {
    background: #eee;
}
li.breadcrumb a {
    text-decoration: none;
}

und der Geige: http://jsfiddle.net/piotku/9cs1zy4h/

InformationsquelleAutor Picard

Anderen Weg, es zu tun, ist die Verwendung eines :nach element und machen dies zu einem Rechteck mit zwei Grenzen und dreht diese.

Hier ist ein Beispiel: Breadcrumb

Haupt-CSS:

li-item:after {
  content: "";
  width: 5rem;
  height: 100%;
  display: inline-block;
  position: absolute;
  background: transparent;
  right: 0;
  top: 0;
  transform: translateX(-1rem) rotate(45deg); 
  border-right: 4px solid white;
  border-top: 4px solid white;
}

InformationsquelleAutor Evertvdw

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.