Put two rounded trapezes with css,

Question

I have a hard time with this problem:

I want to do with css this:

Like the picture: two trapezes with a rounded corner (important!), one trapeze with text and the other with a picture, or icon, the size of the trapeze with the icon can be thinner, but both trapezes must be the same size.

I don't know if should use svg as a background or pure css. If i use svg, how can i insert text and the icon inside the trapezes with a rounded corner?

Thank you in advance for your help.

Answer 1

Here's an approach using SVG.

.banner {
  position: relative;
  width: 570px;
  height: 96px;
  background-color: #4f81bc;
}

.banner svg {
  position: absolute;
  left: 50%;
  overflow: visible;
}

<div class="banner">
  <svg width="96" height="100%" viewBox="0 0 96 96">
    <path d="M -22,0 L 37,85 Q 48,96 59,96 L 22,96 L -37,11 Q -48,0 -59,0 Z"
          fill="#fff"/>
  </svg>
</div>

And a version with two cells added with sample text content.

.banner {
  position: relative;
  width: 570px;
  height: 96px;
  background-color: #4f81bc;
}

.banner svg {
  position: absolute;
  left: 50%;
  overflow: visible;
}

.container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

.container div {
  width: 50%;
  color: white;
  font: sans-serif;
  padding: 2em 0 0 2em;
}

.container div:nth-child(2) {
  text-align: right;
  padding: 2em 2em 0 0;
}
  

<div class="banner">
  <svg width="96" height="100%" viewBox="0 0 96 96">
    <path d="M -22,0 L 37,85 Q 48,96 59,96 L 22,96 L -37,11 Q -48,0 -59,0 Z"
          fill="#fff"/>
  </svg>
  <div class="container">
    <div>Text on the left</div>
    <div>Something else on the right</div>
  </div>
</div>

Answer 2

Here is another idea with one element and less of code. Simply rely on skew and both pseudo element:

.box {
  height: 100px;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.box:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  background: blue;
  border-top-right-radius: 30px;
  transform: skewX(25deg);
  transform-origin: bottom left;
}

.box:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40%;
  background: blue;
  border-bottom-left-radius: 30px;
  transform: skewX(25deg);
  transform-origin: top right;
}

<div class="box">
</div>

Answer 3

It's complicated, but possible to achieve in pure CSS.

You'll need to make use of pseudo :after and :before elements in order to gain the flat edges on the sides (making use of a white border on one side), and then make use of border-top-left-radius and border-bottom-right-radius on the main element in order to get the curvature. Lining these up can be complicated, but depending on how much of an 'edge' you want, you can play around with these values.

Here's an example:

.left,
.right {
  width: 40%;
  height: 100px;
  background: blue;
  float: left;
  position: relative;
}

.left {
  border-top-right-radius: 90px;
}

.left:after {
  content: '';
  position: absolute;
  right: -21.5px;
  bottom: 0;
  border-top: 50px solid white;
  border-left: 31px solid blue;
  width: 0;
}

.right {
  margin-left: 5%;
  border-bottom-left-radius: 90px;
}

.right:before {
  content: '';
  position: absolute;
  left: -21.5px;
  top: 0;
  border-bottom: 50px solid white;
  border-right: 31px solid blue;
  width: 0;
}

<div class="left"></div>
<div class="right"></div>