Html CSS在div上有角度的右边框

我正在尝试创建一个包含3或4个div的菜单，这些div有一个成角度的右边框，就像下面匆忙拼凑的图像一样

HTML将如下所示：

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

你来了
xxx
yyy/div>
sss

yah_1将具有直角边界，而yah_2将只是无边界

---

边界半径显然给了我弯曲的效果，但我想要角度。我在网上看过很多CSS示例，但没有一个给我这种效果。

一般过程是：

创建一个可以使用的伪元素。这意味着在CSS中使用

：before

或

：after

选择器（例如

.yah_1:after{/*这里的样式元素…*/}

）

通过为伪元素提供一些虚假（隐藏）内容、无大小和三个边距来设置伪元素的样式。这将把它变成一个三角形。请阅读更多内容，并尝试调整这些值以了解其工作原理

将三角形放置在它所属元素的右侧。一种方法是设置

.yah_1{position:relative；}

，然后使用

position:absolute以及上/左/下/右属性来定位它

您不需要在最后一项上使用其他类来从该项中删除三角形。只需在{display:none；}之后使用

.yah\u 1:last child:after覆盖样式即可。这样，除了最后一个元素外，所有元素上都将保留三角形

---

尝试使用伪元素。像

：在
之后

简要说明：

我创建了一个
：after
-元素，并用
边框将其旋转到右侧和顶部。在这之后，我创建了一些css来设置它的样式


.youarehere>.yah\u 1，
.youarehere>.yah_2{
显示：内联；
边框：1px纯黑；
位置：相对位置；
右边填充：10px；
左侧填充：5px；
左边距：-4px；
左边界：无；
边界权：无；
}
.youarehere>.yah_1：：之后{
内容：“；
右边框：1px纯黑；
边框顶部：1件纯黑；
变换：旋转（45度）；
位置：绝对位置；
右：0px；
顶部：3px；
高度：13px；
宽度：13px；
}
.youarehere>.yah_1：第一个孩子{
左边框：1px纯黑；
}
.youarehere>.yah_2{
右边框：1px纯黑；
}

你来了
xxx
yyy
sss
使用
:before
和
：after
伪元素与
边框
和
边框左
组合创建倾斜链接：


*，
*：之前，
*：之后{
框大小：边框框；
}
.导航{
列表样式类型：无；
左侧填充：0；
显示器：flex；
填充：0；
边框：3px实心#33691e；
}
李国荣先生{
背景：#aed581；
填充：.5rem 1rem.5rem 2rem；
位置：相对位置；
过渡：all.2s；
}
李海军：悬停{
背景#8bc34a；
}
.nav li:悬停：：之后{
位置：绝对位置；
排名：0；
右：0；
内容：“；
显示：内联块；
边框：17px实心透明；
左边框：10px实心#8bc34a；
右边界：0；
右边距：-10px；
}
李海军：第一个孩子{
填充：.5rem1rem；
}
李海军：不是（最后一个孩子）{
右边距：10px；
}
李海军：在{
位置：绝对位置；
排名：0；
右：0；
内容：“；
显示：内联块；
边框：17px实心透明；
左边框：10px实心#aed581；
右边界：0；
右边距：-10px；
过渡：all.2s；
}
李海军：不是（：第一个孩子）：之前{
位置：绝对位置；
排名：0；
左：0；
内容：“；
显示：内联块；
边框：17px实心透明；
左边框：10px纯白；
右边界：0；
}

链接1
链接2
链接3
链接4


.你在这里.物品{
显示：内联块；
边框：2倍实心#333；
边框宽度：2px 0px；背景色：透明；
边距：0px 0px 0px 0px；填充：5px 12px 5px 23px；浮点：左；光标：指针；
位置：相对位置；
}
.youarehere.item:hover{背景色：#ccc；}
.youarehere.item:first child{border left:2px solid#000；padding left:12px；}
.你在这里.物品.直角三角形{
位置：绝对位置；
右：-11px；
顶部：-1px；
宽度：0；
身高：0；
左边框：12px实心#ffffff；
边框顶部：15px实心透明；
边框底部：15px实心透明；
z指数：9；
}
.youarehere.item:hover.rightTriangle{border left:12px solid#ccc；}
.你在这里。物品：在{
内容：“；
位置：绝对位置；
右图：-15px；
顶部：-2px；
宽度：0；
身高：0；
左边框：15px实心#000；
边框顶部：16px实心透明；
边框底部：16px实心透明；
}
你来了
xxx
yyy
sss

谢谢！我来试试
    </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>