create a responsive design with CSS shape like right triangle.

Question

Hello all I want to make one strip which is built of three div or span. For more clearer picture I am attaching one image here

Here 'MY PROJECT' , 'MATRIX MENU' AND 'HEAT MAP COLORS' are three divs. I gave display: flex property to parent div to align them. Then for right triangle shape I took reference from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_shapes_triangle-right Now in My Project div with :after property I added triangle and given it position absoult. My problem is that, triangle does not behave responsive. The design completely disturb in mobile view and Ipad view.

I tried with span tag also but same result I get. Here What I get for desktop view and mobile view

Desktop View:

Mobile View:

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

Required result: Strip should look perfect as shown in first image in all device. Is there any solution for this?

Thank you.

score 3 · Answer 1 · answered Mar 06 '18 at 07:55

Try this one

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>

create a responsive design with CSS shape like right triangle.

1 Answers1