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

我刚刚遇到了一个帮助我创建CSS三角形的工具。然而，这还不够。它只创建一个外部箭头，而我想创建内部三角形以及

上面这张照片是在Photoshop中创建的。我能够使用创建第一个能干的部分，但随后出现了困难（er）部分。如何创建同时包含外部（右对齐）和内部（左对齐）箭头的块，其中最后一个块仅包含内部（左对齐）箭头

这样做的结果应该是一个可点击的过程链

要创建第一个，这是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;
}

但是我的问题又来了：我该如何创造另外两个呢

谢谢

不是一个“纯CSS”解决方案，但对于图像来说可能要简单得多：
您可以在

提供
提供
提供
提供
提供
.processChain img{
边界：无；
垂直对齐：文本底部；
右边距：3倍；
}
.processChain#start、.processChain a、.processChain span{
背景：url（“images/bg chain start middle.png”）无重复滚动100%0透明；
颜色：#663300；
显示：块；
浮动：左；
高度：22px；
线高：22px；
填充：0 20px 0 10px；
文字装饰：无；
位置：相对位置；
}
.processChain a:悬停{文本装饰：下划线；光标：默认；}
.加工链跨度{
背景：url（“images/bg chain end.png”）无重复滚动100%0透明；
填充：0 13px 0 10px；
}

您需要4个伪元素来正确创建它，因为三角形是使用

边框创建的，所以它们不能有
边框和不同的
背景色。因此，两边都需要一个内三角形和外三角形。我们可以同时使用
：：before
和
：：after
，但由于这只提供了两个元素，我们至少需要两个“真实”元素

由于这是一个导航面板，我使用了一系列的
li
s，并在每个面板内放置了一个
a
。这是一个复杂的设置，所以我要把它分解成几个小提琴来显示进度

编辑：我已经更新了它，以便根据OP的评论，导航元素是流动的，而不是固定宽度


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

HTML:


根据您在问题中提供的代码，我们将使用
：before
和
：after
。注意，我已经根据跨元素共享的规则压缩了这个CSS。两个内三角形具有相同的颜色，两个左箭头具有相同的位置，等等

CSS:
但是我们有一个问题，错误的三角形凌驾于其他三角形之上。我们可以通过一些司法
z-index
来解决这个问题



现在我们有了在所有元素上看起来都正确的工作箭头。成功。。。。几乎。所有元素上都会出现箭头，我们需要隐藏导航面板开始和结束部分的某些箭头



在最后一步中，我们希望删除第一个header元素之前的两个箭头，以及最后一个子元素之后的两个箭头。代码非常简单，结构非常简单。我们需要两个选择器和一个
显示：无

/* 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
的想法提供disinfo的道具



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

HTML:
以下是一种纯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-->

这是小提琴：
使用伪元素来创建特定样式会遇到真正的困难。在这种情况下，bg图像将是一种选择。你似乎想要的是一种效果。我不确定你是否能让那个特别的有块状的尖端而不是尖尖的尖端。正如Paulie_D所建议的那样，图像可能会更好。你可以使用，但每一端使用两个伪元素，因此你必须有一个额外的内部元素。是的，，，具有内部跨度，可以更容易地使用它，但代码会变得相当复杂，相当快。好主意。让我澄清一下，上面的CSS代码和带有.arrow_box类的div对于图像中的第一个就足够了。根本没有内部跨度。就在这里发短信-就这些。也许第二个块（因此也是第三个块）可能更难，但我不希望它们有一个修改过的HTML，因为我看到的唯一要求是修改CSS。我喜欢这样，因为它只对两个方面使用一个伪元素。问题是，因为它是旋转的，所以定位非常手动，与任何东西都不精确相关。另外，角点的渲染将因浏览器而异。看看Chrome和IE11。我不得不称赞你的解决方案，因为它简单易用。我目前正在测试@AndyM的答案，因为（正如他所指出的）Chrome和IE11的差异。你已经拿到我的+1了，谢谢@SanderSchaeffer是的，我无法在每个浏览器上交叉测试它，但我想这会给你一个非常好的起点。安德姆，你的也很好！你从我这里得到了+1。这没有提供任何解释，也没有回答OP的问题“如何使用纯CSS创建三角形”。OP已经知道如何创建三角形。我只是为这个问题提供了一个更好的解决方案，正如Paulie在第一篇评论中所说的，现在是拍摄图片的时候了，但感谢Andy给了你的超级答案！公平地说，我有另一种方法的想法。不过我还是建议添加一些解释。比如：我知道你要求的是纯CSS，但那样会非常复杂。一种更简单的方法是使用图像，下面是如何实现这一点。这也有助于人们将来阅读这个问题。这样做，你会从我这里得到+1。公平地说，我对你思考并写出另一个解决方案表示赞赏
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;
}

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

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

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

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

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

}