divの右端にCSSが角度をつけた

Question

私は3つまたは4つのDIVSからなるメニューを作成しようとしています。

HTMLは次のようになります。直角の境界線を持っているでしょうし、yah_2だけでボーダレスになり

<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。

ボーダー半径は明らかに私に湾曲した効果を与えますが、角度を付ける必要があります。私は数多くのCSSの例をオンラインで見てきましたが、私にはこの効果はありません。

Answer 1

疑似要素を使用してください。 :afterのように。 CSS Pseudo-elements

短い説明：

私は:after -elementを作成し、border右、上でそれを回転させてきました。その後、私はそれをスタイルするためにいくつかのCSSを作成しました。

.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>

:before

Answer 2

一般的なプロセスは次のとおりです。

1. は、あなたが利用することができ擬似要素を作成します。これは、CSS内の:beforeまたは:afterセレクタを使用することを意味します（例：.yah_1:after { /* style element here... */ }）。

2. 擬似要素に、偽の（隠された）内容、サイズ、および3つの余白を与えることによってスタイルを設定します。これは三角形に変わります。さらにin this articleを読んで値の調整を試して、その動作を確認してください。

3. それが含まれている要素の右側に三角形を置きます。これを行う1つの方法は、.yah_1 { position: relative; }を設定し、擬似要素の上/左/下/右のプロパティと共にposition: absolute;を使用して配置することです。

4. 三角形を削除するには、最後のアイテムに別のクラスは必要ありません。 .yah_1:last-child:after { display: none; }を使用してスタイルを上書きするだけです。それは最後の要素を除くすべての要素に三角形を残します。

Answer 3

使用してborderとborder-leftとの組み合わせで:after擬似要素は、傾斜リンクを作成するには：

*, 
 
*: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>

Answer 4

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