在html

Question

我将设计放入html + css - 问题是 - 如何在两侧绘制曲线，以便它可以扩展和响应？什么是最好的方法

Answer 1

你可以尝试这个：

section{
  margin: 0 auto;
  width: 600px;
  text-align: center;
}
  h1 {
    position: relative;
//margin-top: 20px;
  }

  h1.one {
    margin-top: 0;
  }

  h1.one:before {
    content: "";
    display: block;
    border: solid 1px black;
    width: 100%;
    height: 150px;
    position: absolute;
    top: 50%;
    z-index: 1;
      border-radius:5px;
  }

  h1.one span {
    background: #fff;
    padding: 0 20px;
    position: relative;
    z-index: 5;
  }

/* method 2*/

button
{
  padding:8px;
  background-color: gray
  color:white;
  border: 2px solid;
    border-radius: 15px;
  margin-top:2px;
  position: relative;
    z-index: 5;

}
.circle
{
    border:4px solid red;
    height: 70px;
    width: 70px;
    border-radius: 40px;
   position:relative;
    margin:10px auto;
   display:inline-block;
}

.row
{

    height: 100px;
    width: 700px;
    margin: 10px;
    text-align:center;
    position:relative;
}

DEMO FIDDLE

Answer 2

根据描述检查此答案可满足您的需求。

＆＃13;

＆＃13;

body {
    background:#007DAD;
}
section {
    text-align: center;
}
h1.one {
    position: relative;
    margin-top: 0;
}
h1.one:before {
    content: "";
    display: block;
    border: solid 1px #FFF;
    width: 100%;
    height: 150px;
    position: absolute;
    top: 50%;
    z-index: 1;
    border-radius:5px;
}
h1.one span {
    background: #007DAD;
    padding: 0 20px;
    position: relative;
    z-index: 5;
}
.row {
    height: 100px;
	margin: 10px;
}
.circle {
    border:4px solid red;
	height: 70px;
	width: 70px;
	border-radius: 40px;
    margin:10px auto;
    display:inline-block;
}
button {
    padding:10px;
    background-color: gray; 
    color:white;
    border: 2px solid;
    border-radius: 5px;
    margin-top:-10px;
    position: relative;
    z-index: 5;
}

＆＃13;

<section>
    <h1 class="one">
        <span>It Has Naver Been Easier</span>
    </h1>
    <div class="row">
        <div class="circle"><p>1</p></div>
        <div class="circle"><p>2</p></div>
        <div class="circle"><p>3</p></div>
    </div>
    <button type="button">Order Now</button>
</section>

＆＃13;

＆＃13;

＆＃13;