Christopher Tan Christopher Tan - 5 months ago 23
HTML Question

creating css3 specific shape

Desired Shape

I trying to create the middle V section shape using css3, is this possible? This pattern is to be used as background of a footer and in a responsive layout. So I'm trying to avoid directly using image.

Answer Source

div {
  background-color: red;
  width: 100%;
  height: 50px;
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  background color: #fff;
  width: 20px;
  height: 20px;
  top: -10px;
  background-color: #fff;
  transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
}
<div><span></span></div>