使用CSS形状创建响应式设计，如直角三角形。 [重复]

Question

这个问题在这里已有答案：

• Create border arrow with css 4个答案
• How to make a box with arrow in CSS? 7个答案

大家好我想制作一个由三个div或span构成的条带。为了更清晰的图片我附上一张图片here

这里的'我的项目'，'矩阵菜单'和'热图颜色'是三个div。我给显示：flex属性到父div以对齐它们。然后对于正三角形的形状，我从https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_triangle-right参考了现在在我的项目div中：在属性之后我添加了三角形并给它位置absoult。我的问题是，三角形表现不敏感。设计在移动视图和Ipad视图中完全打扰。

我尝试使用span标签，但结果相同。这是桌面视图和移动视图的内容

桌面视图：

移动视图：

CSS：

.matrix_vedio_header{
    color: white;
    DISPLAY: flex;
    justify-content: center;
    margin-bottom: 2em;
}

.matrix_my_project{
    background-color: #f3ab08;
    padding: 9px 35px;
}
.matrix_menu{
    background-color: #4295d2;
    padding: 9px 35px;
}
.matrix_heat_map_colors{
    background-color: #233c51;
    padding: 9px 35px;
}

.matrix_my_project:after{
    content: '';
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-left: 34px solid #555;
    border-bottom: 18px solid transparent;
    position: absolute;
    z-index: 11111;
    bottom: 1px;
}

.matrix_menu:after{
    content: '';
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-left: 34px solid #555;
    border-bottom: 18px solid transparent;
    position: absolute;
    z-index: 11111;
    bottom: 1px;
}

所需结果：条带应看起来完美，如所有设备中的第一张图像所示。这有什么解决方案吗？

谢谢。

Answer 1

试试这个吧

ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: white;
    margin-bottom: 2em;
}

ul li {
    width: 33.33%;  
}
ul li a {
    width: 100%;
    position: relative;
    padding: 9px 65px;
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
}
ul li a.one {
    background-color: #f3ab08;
}
ul li a.two {
    background-color: #4295d2;
}
ul li a.three {
    background-color: #233c51;
}

ul li + li a:after{
    content: '';
    width: 0;
    height: 0;
    border-top: 19px solid transparent;
    border-left: 34px solid #f3ab0a;
    border-bottom: 18px solid transparent;
    position: absolute;
    z-index: 11111;
    left: 0;
    bottom: 1px;
}
ul li a.three:after {
    border-left: 34px solid #4295d3;
}

@media only screen and (max-width: 767px) {
    ul li a { 
        font-size: 14px;
    }
}


<ul>
    <li><a class="one" href="#">One</a></li>
    <li><a class="two" href="#">Two</a></li>
    <li><a class="three" href="#">Three</a></li>
</ul>