2017-12-29 5 views
2

Ich versuche ein Menü zu erstellen, das aus 3 oder 4 DIVS besteht, die einen rechten Rand haben, der abgewinkelt ist, wie das hastig zusammengesetzte Bild unten.CSS gewinkelt rechten Rand auf einem Div

enter image description here

Die HTML würde wie folgt aussehen:

<div class="youarehere"> 
     <div class="yah_1">You are here</div> 
     <div class="yah_1">xxx</div> 
     <div class="yah_1">yyy/div> 
     <div class="yah_2">sss</div> 
    </div> 

yah_1 die rechtwinkeligen Grenze haben würde und yah_2 wäre nur randlos.

Border-Radius gibt mir offensichtlich den gekrümmten Effekt, aber ich möchte abgewinkelt. Ich habe mir zahlreiche CSS-Beispiele online angeschaut, aber keine gibt mir diesen Effekt.

+0

https://codepen.io/homenkovit/pen/adxxrR –

Antwort

1

Versuchen Sie, Pseudo-Elemente zu verwenden. Wie :after. CSS Pseudo-elements

Kurze Erklärung:

Ich habe eine :after -elementigen erstellt und gedreht, um ihn mit einem border rechts und von oben. Danach habe ich etwas CSS erstellt, um es zu stylen.

.youarehere>.yah_1, 
 
.youarehere>.yah_2 { 
 
    display: inline; 
 
    border: 1px solid black; 
 
    position: relative; 
 
    padding-right: 10px; 
 
    padding-left: 5px; 
 
    margin-left: -4px; 
 
    border-left: none; 
 
    border-right: none; 
 
} 
 

 
.youarehere>.yah_1::after { 
 
    content: " "; 
 
    border-right: 1px solid black; 
 
    border-top: 1px solid black; 
 
    transform: rotate(45deg); 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 3px; 
 
    height: 13px; 
 
    width: 13px; 
 
} 
 

 
.youarehere>.yah_1:first-child { 
 
    border-left: 1px solid black; 
 
} 
 

 
.youarehere>.yah_2 { 
 
    border-right: 1px solid black; 
 
}
<div class="youarehere"> 
 
    <div class="yah_1">You are here</div> 
 
    <div class="yah_1">xxx</div> 
 
    <div class="yah_1">yyy</div> 
 
    <div class="yah_2">sss</div> 
 
</div>

0

Der allgemeine Prozess ist:

  1. ein Pseudoelement Erstellen Sie Handhabung machen können. Dies bedeutet, dass Sie entweder einen :before oder :after Selektor in Ihrem CSS verwenden (z. B. .yah_1:after { /* style element here... */ }).

  2. Gestalten Sie das Pseudo-Element, indem Sie ihm einen falschen (versteckten) Inhalt, keine Größe und drei Ränder geben. Dadurch wird es zu einem Dreieck. Lesen Sie mehr in this article und versuchen Sie die Werte anzupassen, um zu sehen, wie es funktioniert.

  3. Platzieren Sie das Dreieck rechts neben dem Element, zu dem es gehört. Eine Möglichkeit, dies zu tun, könnte sein, indem Sie .yah_1 { position: relative; } setzen und dann position: absolute; auf Ihrem Pseudo-Element zusammen mit top/left/bottom/right Eigenschaften verwenden, um es zu positionieren.

  4. Sie benötigen keine andere Klasse für das letzte Element, um das Dreieck zu entfernen. Überschreiben Sie einfach Ihre Stile mit .yah_1:last-child:after { display: none; }. Dadurch bleibt das Dreieck auf allen außer dem letzten Element erhalten.

+0

Dank! Ich werde es versuchen –

0

Verwenden :before und :after pseudo-Elemente in Kombination mit border und border-left zu schrägen Verknüpfungen zu erstellen:

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 

 
.nav { 
 
    list-style-type: none; 
 
    padding-left: 0; 
 
    display: flex; 
 
    padding: 0; 
 
    border: 3px solid #33691e; 
 
} 
 

 
.nav-li { 
 
    background: #aed581; 
 
    padding: .5rem 1rem .5rem 2rem; 
 
    position: relative; 
 
    transition: all .2s; 
 
} 
 

 
.nav-li:hover { 
 
    background: #8bc34a; 
 
} 
 

 
.nav-li:hover::after { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    content: ""; 
 
    display: inline-block; 
 
    border: 17px solid transparent; 
 
    border-left: 10px solid #8bc34a; 
 
    border-right: 0; 
 
    margin-right: -10px; 
 
} 
 

 
.nav-li:first-child { 
 
    padding: .5rem 1rem; 
 
} 
 

 
.nav-li:not(:last-child) { 
 
    margin-right: 10px; 
 
} 
 

 
.nav-li:after { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    content: ""; 
 
    display: inline-block; 
 
    border: 17px solid transparent; 
 
    border-left: 10px solid #aed581; 
 
    border-right: 0; 
 
    margin-right: -10px; 
 
    transition: all .2s; 
 
} 
 

 
.nav-li:not(:first-child):before { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    content: ""; 
 
    display: inline-block; 
 
    border: 17px solid transparent; 
 
    border-left: 10px solid white; 
 
    border-right: 0; 
 
}
<ul class="nav"> 
 
    <li class="nav-li">Link 1</li> 
 
    <li class="nav-li">Link 2</li> 
 
    <li class="nav-li">Link 3</li> 
 
    <li class="nav-li">Link 4</li> 
 
</ul>

-1

https://codepen.io/UI-UXDeveloper/pen/jYBRLp

</style> 
    .youarehere .item { 
    display:inline-block; 
    border:2px solid #333; 
    border-width:2px 0px;background-color:transparent; 
    margin:0px 0px 0px 0px;padding:5px 12px 5px 23px;float:left;cursor:pointer; 
    position:relative; 
} 
.youarehere .item:hover{background-color:#ccc;} 
.youarehere .item:first-child{border-left:2px solid #000;padding-left:12px;} 
.youarehere .item .rightTriangle{ 
position: absolute; 
    right: -11px; 
    top: -1px; 
    width: 0; 
    height: 0; 
    border-left: 12px solid #ffffff; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    z-index: 9; 
} 
.youarehere .item:hover .rightTriangle{border-left: 12px solid #ccc;} 
.youarehere .item:after{ 
     content: ""; 
    position: absolute; 
    right: -15px; 
    top: -2px; 
    width: 0; 
    height: 0; 
    border-left: 15px solid #000; 
    border-top: 16px solid transparent; 
    border-bottom: 16px solid transparent; 
} 
</style> 


    <div class="youarehere"> 
    <div class="yah_1 item">You are here<div class="rightTriangle"></div></div> 
     <div class="yah_1 item">xxx<div class="rightTriangle"></div></div> 
     <div class="yah_1 item">yyy<div class="rightTriangle"></div></div> 
     <div class="yah_2 item">sss<div class="rightTriangle"></div></div> 
    </div> 

https://codepen.io/UI-UXDeveloper/pen/jYBRLp

Verwandte Themen