CSS div 上的倾斜右边框

Question

我正在尝试创建一个由 3 或 4 个 DIVS 组成的菜单，这些 DIVS 的右边框是倾斜的，如下面匆忙拼凑的图像。

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>

yah_1 将有直角边框，而 yah_2 将没有边框。

border-radius 显然给我弯曲的效果，但我想要有角度的。我在网上看了很多 CSS 个示例，但 none 给了我这个效果。

Answer 1

大致流程是：

创建一个你可以使用的伪元素。这意味着在 CSS 中使用 :before 或 :after 选择器（例如 .yah_1:after { /* style element here... */ } ）。
通过给它一些虚假（隐藏）内容、无大小和三个边距来设置伪元素的样式。这将把它变成一个三角形。阅读更多内容 in this article 并尝试调整值以查看其工作原理。
将三角形放在其所属元素的右侧。一种方法是设置 .yah_1 { position: relative; }，然后在伪元素上使用 position: absolute; 以及 top/left/bottom/right 属性来定位它。
您不需要对最后一个项目进行不同的 class 即可从该项目中删除三角形。只需使用 .yah_1:last-child:after { display: none; } 覆盖您的样式。这将使三角形出现在除最后一个元素之外的所有元素上。

Answer 2

尽量使用伪元素。喜欢:after。 CSS Pseudo-elements

简短说明：

我创建了一个 :after 元素并将其旋转 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>

Answer 3

使用 :before 和 :after 伪元素结合 border 和 border-left 创建倾斜链接：

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

CSS div 上的倾斜右边框

CSS angled right border on a div

html

css

border