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

Question

我刚刚遇到CSS Arrow请帮我创建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个伪元素来正确创建它,因为三角形是用borders 创建的,所以它们不能有border不同的background-color.因此,我们需要两侧的内外三角形.我们可以同时使用::before和::after,但由于只给了我们两个,我们至少需要两个"真实"的元素.

由于这是一个导航面板,我使用了一系列lis并a在每个内部放置一个.这是一个复杂的设置,所以我要把它分解成几个显示进展的小提琴.

编辑:我已经更新了这个,所以导航元素是流动的,而不是固定宽度,根据OP的评论.

第1步 - 导航设置:

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

HTML:

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

CSS:

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

第2步 - 设置伪元素:

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

CSS:

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

我们遇到了错误的三角形覆盖其他人的问题.我们可以用一些司法解决这个问题z-index;

第3步 - 修复显示顺序:

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

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

第4步 - 修复第一个和最后一个导航子项:

在最后一步中,我们要删除第一个标题元素之前的两个箭头,以及最后一个子元素之后的两个箭头.到目前为止,我们已经建立的结构令人惊讶地简单.我们需要两个选择器,和display:none;.

/* 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.

摘要

根据OP在评论中的要求,最终代码为:

HTML:

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

CSS:

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