html - 在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