Is it possible to make it faster?

Question

css

Hello, you need to make up something like the following: I

took bootstrap for the grid. Actually what I'm trying to do:

html

<section class="main-banner">
    <header>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <img src="img/logo_small.png" width="163" class="logo"/>
                </div>
                <div class="col-md-9">
                    <ul class="menu pull-right">
                        <li><a class="active-menu-item" href="#">Ссылка</a></li>
                        <li><a href="#">Ссылка</a></li>
                        <li><a href="#">Ссылка</a></li>
                        <li><a href="#">Ссылка</a></li>
                        <li><a href="#">Ссылка</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <div class="main-flex">
        <div class="container">
            <div class="row">

                <div class="col-md-5">
                    <h1 class="main-h1">МАЛЫЕ АРХИТЕКТУРНЫЕ ФОРМЫ</h1>
                    <span class="main-point">Дерево</span>
                    <span class="main-point">Металл</span>
                    <span class="main-point">Камень</span>
                    <p class="main-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolore
                        doloribus eaque, eligendi excepturi hic illum impedit ipsum magni natus, optio perspiciatis
                        quasi quod, repellendus sed tempore temporibus tenetur vitae.</p>
                </div>

            </div>
        </div>
    </div>
    <div class="svg-clip">
        <svg id="bigHalfCircle" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100"
             viewBox="0 0 100 100" preserveAspectRatio="none">
            <path d="M0,0 L0,100 L100,100 L100,0 Q50,200 0,0"></path>
        </svg>
    </div>
</section>

css

.main-banner {
position: relative;
width: 100%;
/*height:100%;*/
background: #ED8F03;
background: -moz-linear-gradient(-45deg, #ED8F03 0%, #FFB75E 100%);
background: -webkit-linear-gradient(-45deg, #ED8F03 0%,#FFB75E 100%);
background: linear-gradient(135deg, #ED8F03 0%,#FFB75E 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ED8F03', endColorstr='#FFB75E',GradientType=1 );
}
header {
height: 65px;
line-height: 65px;
}
.logo {
margin-top: 10px;
}
.menu li {
display: inline-block;
padding-left: 20px;
color: rgba(255,255,255,.6);
}
.menu ul li a {
display: block;
position: relative;
}
.active-menu-item {
font-weight: 400!important;
color: rgba(255,255,255,.95) !important;
}
.main-flex {
width: 100%;
/*height: 100%;*/
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.main-h1 {
font-size: 35px;
color: rgba(255,255,255,.95);
letter-spacing: 3px;
margin-bottom: 25px;
line-height: 40px;
}
.main-point {
display: inline-block;
color: rgba(255,255,255,.8);
margin-right: 10px;
background-color: rgba(0,0,0,.5);
padding: 5px 20px;
}
.main-text {
color: rgba(255,255,255,.9);
margin-top: 25px;
font-size: 16px;
}
.svg-clip {
position: absolute;
width: 100%;
bottom: -6px;
}
.svg-clip > svg {
fill: #fff;
}

I'm trying to align a block with text to the center (vertically) using flexbox, but flexbox does not have a height set in any way. I set it to 100%, and it extends beyond the parent block (goes beyond exactly the height of the header). Therefore, the alignment is not centered.

See photo

And are there any normal options for how to make a block round? Now I just create a svg, which I impose on the block itself. And I think it's very strange.
Please tell me how it can be implemented in a right way.
And yes, it seems to me that I just have a bunch of extra divs.

Answer 1

Are there any normal options for how to make a block round?

There is such an option. I don't know how "correct" it is, but it works.

Answer 2

svg will help with position and top

Answer 3

DaniLaFokc put the background separately on the absolute, make radii, stretch it.
all this on pure css/html, without svg.
tw bootstrap will definitely not help with this.