How to make Background div inner curved using HTML, CSS?

Question

I want my section background look like as shown in the image at the end, how can i do that using css?

.bg{
  width: 400px;
  height: 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid #000;
  background: red;
  color: #fff;
  display: flex;
}
.bg p{
  text-align: center;
  margin: auto;
  font-size: 36px;
}

<div class="bg">
  <p>Section Content</p>
</div>

You should look into CSS :before and :after pseudo-elements. See this article for some examples. — Zenoo
– Zenoo, Commented Mar 21, 2018 at 11:00
You could use css arrows but as you have a border, you would need before and afters on both your p and bg — Pete
– Pete, Commented Mar 21, 2018 at 11:02

Temani Afif · Accepted Answer · 2019-06-02 11:28:53Z

You can consider multiple background using linear-gradient like below without the need of extra elements:

.bg{
  width: 400px;
  height: 220px;
  padding: 50px 0;
  box-sizing:border-box;
  text-align: center;
  background:
    linear-gradient(to bottom left , red 50%,transparent 51%) bottom left,
    linear-gradient(to bottom left , transparent 49%,red 50%) top    left,
    linear-gradient(to bottom right, red 50%,transparent 51%) bottom right,
    linear-gradient(to bottom right, transparent 49%,red 50%) top    right,
    red content-box;
  background-size:50% 50px;
  background-repeat:no-repeat;
  color: #fff;
  display: flex;
}
.bg p{
  text-align: center;
  margin: auto;
  font-size: 36px;
}

<div class="bg">
  <p>Section Content</p>
</div>

But in case you need border around I would then consider pseudo-elements like this:

.bg{
  width: 400px;
  height: 200px;
  padding: 20px;
  text-align: center;
  position:relative;
  color: #fff;
  display: flex;
  z-index:0;
}
.bg:before,
.bg:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  background:red;
  border:2px solid #000;
  z-index:-1;
}
.bg:before {
  right:50%;
  left:0;
  transform:skewY(15deg);
  transform-origin:top left;
  border-right:none;
}
.bg:after {
  left:50%;
  right:0;
  transform:skewY(-15deg);
  transform-origin:top right;
  border-left:none;
}
.bg p{
  text-align: center;
  margin: auto;
  font-size: 36px;
}

<div class="bg">
  <p>Section Content</p>
</div>

Sebastian Speitel · Accepted Answer · 2018-03-21 11:09:08Z

2

You can use clip-path to do such things and create them using this tool.

.bg {
  width: 400px;
  height: 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid #000;
  background: red;
  color: #fff;
  display: flex;
  -webkit-clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0, 50% 20%);
  clip-path: polygon(100% 0, 100% 80%, 50% 100%, 0 80%, 0 0, 50% 20%);
}

.bg p {
  text-align: center;
  margin: auto;
  font-size: 36px;
}

<div class="bg">
  <p>Section Content</p>
</div>

answered Mar 21, 2018 at 11:09

Sebastian Speitel

7,3772 gold badges21 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to make Background div inner curved using HTML, CSS?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related