[Solved] How can I draw arc like this image below?

by


You could use a before/after pseudo element on one of the blocks. Then on that element you’d give it the same background color and use transform: skew(-2deg); to give it the tilted affect.

See the example below, it’s fairly simple enough once you understand how you can use pseudo elements to your advantage.

section {
  position: relative;
  float: left;
  width: 100%;
  background: black;
  height: 300px;
}

.skewedSection {
  background: red;
}

.normalSection:before {
  content: "";
  background: red;
  height: 100px;
  -webkit-transform: skewY(-2deg);
  transform: skewY(-2deg);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50px;
  z-index: 2;

}
<section class="normalSection">
</section>

<section class="skewedSection">
</section>

0

solved How can I draw arc like this image below?