I want to implement the following separator line in HTML and CSS.

I would like to implement a home page divider in this way.

I made a trapezoidal shape with a border and tried to float it with absolute, but
I can't do it well because I can't round the corners.

I don't want to use images,
I would also like to know how to implement using images.

Corresponding source code

.content {
  background-color: lightblue;
  position: relative;
  height: auto;
.title {
  position: absolute;
  top: -5px;
  text-align: center;
  font-size: 40px;
  position: relative;
  line-height: 1em;
  text-shadow: 0px 2px 1px #ffffff;
.box {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translate (-50%, -50%);
  width: 800px;
  border-radius: 26px 26px 6 6/80px 80px 6 6;
 //It does not work
  border-bottom: 60px solid light blue;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  height: 0;
.inner {
  height: 200px;

Is it impossible this way?
If there are other ways or methods that can be implemented
Please professor.

  • Answer # 1

    If you want to stop the image as much as possible, I think it is better to use SVG.
    If you do it with CSS, it will be quite difficult to make it beautifully, and it will be difficult to add animation.

    For the time being, I tried to make it look like it with border-radius only at the top, but I do not recommend it very much.


Related articles