У меня есть базовые вопросы по CSS о растяжении фигуры по ширине браузера

У меня есть базовые вопросы CSS о растягивании фигуры по ширине браузера.

Я хочу поместить прямоугольник между двумя треугольниками.

Это мой HTML:

    <div id = "monitor_top_left"></div>
    <div id = "monitor_top_middle"></div>
    <div id = "monitor_top_right"></div>

Это мой CSS:

    #monitor_top_left {
        width: 0;
        height: 0;
        border-bottom: 60px solid #AFA995;
        border-left: 100px solid #5C5A4D;
        float: left;
    }
    #monitor_top_middle {
        width: 100%;        /* I need to stretch across the page */
        height: 60px;
        background: #AFA995;
        float: left;
    }
    #monitor_top_right {
        width: 0;
        height: 0;
        border-bottom: 60px solid #AFA995;
        border-right: 100px solid #5C5A4D;
        float: right;
    }
    .monitor_outer {
        clear: both;
    }

У меня проблемы с моими свойствами float, я получаю прямоугольник между треугольниками. Мне нужно, чтобы прямоугольник был плавным для адаптивного дизайна.