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 只会无边框。

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

Answer 1

尝试使用伪元素。像: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 2

将:before和:after个伪元素与border和border-left结合使用，以创建倾斜的链接：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

一般过程是：

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

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上设置了右边框

4 个答案: