background color on polygon figure - css

Question

I need to set the arrow white background on the same color of the background
,If I set the background on blue and the color on white ,the background non covered zone is white and It should be at the same color of the container background(some kind of grey)
Problem image
this is the arrow code
#arrow {
width: 120px;
height: 40px;
position: relative;
background: blue;
color: white;
padding-left: 25px;
padding-top: 5px;
}
#arrow:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
#arrow:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid blue;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
I'm not sure about how to fix it.

Answer 1

Here is an idea with multiple background:
.arrow {
padding:0 20px;
color:#fff;
font-size:25px;
width:120px;
text-align:center;
line-height:50px;
display:inline-block;
background:
/*right arrow*/
linear-gradient(to bottom left, transparent 49%,blue 50%) top right,
linear-gradient(to top left, transparent 49%,blue 50%) bottom right,
/*left arrow*/
linear-gradient(to bottom left, blue 49%,transparent 50%) top left,
linear-gradient(to top left, blue 49%,transparent 50%) bottom left,
blue content-box;
background-size:20px 50%;
background-repeat:no-repeat;
}
<div class="arrow">
some text
</div>

Answer 2

I made more simple with transform:skew() property. Solves the your problem exactly.
body {
background: #333;
padding:30px;
}
#arrow {
width: 120px;
height: 40px;
position: relative;
color:#fff;
font-size:22px;
display:flex;
align-items:center;
justify-content:center;
}
#arrow::before {
content:"";
width: 120px;
height: 20px;
position: absolute;
top:0;
left:0;
background:blue;
transform:skewX(40deg);
z-index:-1;
}
#arrow::after {
content:"";
width: 120px;
height: 20px;
position: absolute;
top:20px;
left:0;
background:blue;
transform:skewX(-40deg);
z-index:-1;
}
<div id="arrow">Section</div>