如何使用纯CSS在div上创建内部和外部三角形？

Question

我刚遇到CSS Arrow please这有助于我创建CSS三角形。但是，这还不够。它只创建一个外部箭头，而我也想创建内部三角形。

以上内容仅在Photoshop中创建。我能够使用CSS Arrow Please创建第一个能够，然后硬（呃）部分出现。如何创建包含外部（右对齐）和内部（左对齐）箭头的块，其中最后一个箭头仅包含内部（左对齐）箭头。

这样做的结果应该是a可点击的处理链。

要创建第一个，这是CSS

.arrow_box:first-child {
    position: relative;
    background: #1abc9c;
    border: 5px solid #16a085;
}

.arrow_box:first-child:after, .arrow_box:first-child:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:first-child:after {
    border-color: rgba(26, 188, 156, 0);
    border-left-color: #1abc9c;
    border-width: 16px;
    margin-top: -16px;
}
.arrow_box:first-child:before {
    border-color: rgba(22, 160, 133, 0);
    border-left-color: #16a085;
    border-width: 23px;
    margin-top: -23px;
}

然后我的问题出现了：我将如何创建另外两个？

谢谢！

Answer 1

您需要4个伪元素才能正确创建，因为三角形是使用border创建的，因此它们不能有border和不同的background-color。因此，我们需要两侧的内外三角形。我们可以同时使用::before和::after，但由于这只会给我们两个，我们至少需要两个“真实”元素。

由于这是一个导航面板，我使用了一系列li s并在每个a内放置<nav> <li><a href="">Office</a></li> <li><a href="">Office</a></li> <li><a href="">Office Two</a></li> <li><a href="">Short</a></li> </nav> 。这是一个复杂的设置，所以我要把它分解成几个显示进展的小提琴。

编辑：我已更新此内容，以便根据OP的评论，导航元素是流畅的，而不是固定宽度。

---

Step 1 - Navigation Setup:

首先，我们根据您的模型设置导航框。

HTML：

nav {
    background: #1abc9c;
}
nav li {
    display:inline-block;
    position:relative;
    margin:10px;
    margin-right:0;
    border: 5px solid #16a085;
    padding:15px 30px;
}
nav li a {
    color:white;
    font-weight:bold;
    display:block;
    height:100%;
    width:100%;
    text-decoration:none;
    font-size:24px;
    font-family:Arial;
}

CSS：

:before

---

Step 2 - Set Up Pseudo-elements:

我们将根据您在问题中提供的代码使用:after和/* Arrows */ nav li:after, nav li a:after, nav li:before, nav li a:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events:none; /* So that the mouse will ignore this on top of the clickable area.*/ } nav li:before, nav li a:before { left: -5px; } nav li a:before, nav li a:after { border-left-color: #1abc9c; border-width: 16px; margin-top: -16px; } nav li:before, nav li:after { border-left-color: #16a085; border-width: 23px; margin-top: -23px; } 。请注意，我已根据跨元素共享的规则压缩了此CSS。两个内三角具有相同的颜色，左箭头具有相同的位置等。

CSS：

z-index

我们遇到了错误的三角形覆盖其他人的问题。我们可以通过一些司法nav li:before { z-index:0; } nav li a:before { z-index:1; } nav li:after { z-index:2; } nav li a:after { z-index:3; } ;

来解决这个问题

---

Step 3 - Fix Display Order:

display:none;

现在我们在所有元素上都有正确的工作箭头。成功！ ....几乎。我们的箭头出现在所有元素上，我们需要隐藏导航面板开头和结尾的某些箭头。

---

Step 4 - Fix First and Last Navigation Children:

在最后一步中，我们要删除第一个标题元素之前的两个箭头，以及最后一个子元素之后的两个箭头。到目前为止，我们已经建立的结构令人惊讶地简单。我们需要两个选择器和一个/* First & Last Arrow Fix */ nav li:first-child:before, nav li:first-child a:before { display:none; } nav li:last-child:after, nav li:last-child a:after { display:none; } 。

nav

我们已经完成了！

修改：道具消弱，以便使用header代替<nav> <li><a href="">Office</a></li> <li><a href="">Office</a></li> <li><a href="">Office Two</a></li> <li><a href="">Short</a></li> </nav> 。

---

摘要

根据OP在评论中的要求，最终代码是：

HTML：

nav {
    background: #1abc9c;
}
nav li {
    display:inline-block;
    position:relative;
    margin:10px;
    margin-right:0;
    border: 5px solid #16a085;
    padding:15px 30px;
}
nav li a {
    color:white;
    font-weight:bold;
    display:block;
    height:100%;
    width:100%;
    text-decoration:none;
    font-size:24px;
    font-family:Arial;
}
/* Arrows */
nav li:after, nav li a:after, nav li:before, nav li a:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events:none; /* So that the mouse will ignore this on top of the clickable area.*/
}
nav li:before, nav li a:before {
    left: -5px;   
}
nav li a:before, nav li a:after {
    border-left-color: #1abc9c;
    border-width: 16px;
    margin-top: -16px;
}
nav li:before, nav li:after {
    border-left-color: #16a085;
    border-width: 23px;
    margin-top: -23px;
}
/* Overlapping Fix */
nav li:before {
    z-index:0;
}
nav li a:before {
    z-index:1;
}
nav li:after {
    z-index:2;
}
nav li a:after {
    z-index:3;
}
/* First & Last Arrow Fix */
nav li:first-child:before, nav li:first-child a:before {
    display:none;
}
nav li:last-child:after, nav li:last-child a:after {
    display:none;
}

CSS：

{{1}}

Answer 2

这是一种纯粹的CSS方式：

<强> HTML

 <div id="nav">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
</div><!--nav-->

<强> CSS

      #nav {
    background:#4fd34e;
    height:100px;
    width:100%;
    position:relative;
}

#nav li {
    display:inline-block;
    line-height:2;
    border:3px solid #FFF;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    position:relative;
    margin-top:20px;
    margin-left:20px;
}

#nav li:before {
    content:"";
    display:block;
    position:absolute;
    width:20px;
    height:20px;
    background:#4fd34e;
    border:3px solid #FFF;
    border-width:3px 3px 0 0;
    margin-left:-12px;
    margin-top:10px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(45deg); /* FF */
    transform: rotate(45deg);
 }

#nav li:after {
    content:"";
    display:block;
    position:absolute;
    width:20px;
    height:20px;
    background:#4fd34e;
    border:3px solid #FFF;
    border-width:3px 3px 0 0;
    right:-14px;
    top:8px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -moz-transform: rotate(45deg); /* FF */
    transform: rotate(45deg);
    z-index:100;
 }

#nav li a {
    display:block;
    text-decoration:none;
    padding:5px 20px;

}

#nav li:first-child:before,
#nav li:last-child:after {
    display:none;

}

这是小提琴： http://jsfiddle.net/disinfor/8KvRp/3

Answer 3

不是＆＃34;纯CSS＆＃34;解决方案，但可能不那么复杂的图像：
您可以在this fiddle

中看到它的实际效果

<div class="processChain">
    <div id="start"><img src="images/home.png" height="18" /> Offerte</div>
    <a><img src="images/home.png" height="18" />Offerte</a>
    <a><img src="images/home.png" height="18" />Offerte</a>
    <a><img src="images/home.png" height="18" />Offerte</a>
    <span><img src="images/home.png" height="18" />Offerte</span>
</div>

.processChain img {
border: none;
vertical-align: text-bottom;
margin-right: 3px;
}
.processChain #start, .processChain a, .processChain span {
background:url("images/bg-chain-start-middle.png") no-repeat scroll 100% 0 transparent;
color:#663300;
display:block;
float:left;
height:22px;
line-height:22px;
padding:0 20px 0 10px;
text-decoration:none;
position:relative;
}
.processChain a:hover{text-decoration:underline;cursor: default;}
.processChain span {
background:url("images/bg-chain-end.png") no-repeat scroll 100% 0 transparent;
padding:0 13px 0 10px;
}