带有纯CSS的曲线标题[重复]

Question

这个问题在这里已有答案：

Curve bottom side of the div to the inside with CSS 2回答
How to create uneven rounded sides on a div? 1回答

试图用纯CSS修剪这个弯曲的标题，但是使用边框半径并不能保持左右边框边缘像图像中那样清晰。任何帮助将不胜感激.

Answer 1

你可以通过多种方式做到这一点，其中一个就是使用border-radius。因此，对于形状，你只需要有一个border-bottom-left-radius:和border-bottom-right-radius:。

这里我附上了代码，

body{
  background-color:#f3f2f4;
}
.header{
  width:105%;
  height:40%;
  left:-3%;
  position:absolute;
  background-image: linear-gradient(#8459f9, #4c3196);
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}
.container{
  width:60vw;
  height:80vh;
  background-color:white;
  border-radius:10px;
  position:absolute;
  top:50%;
  overflow:hidden;
  left:50%;
  transform:translate(-50%,-50%);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
  <div class="header">
    </div>  
  </div>
</body>
</html>

带有纯CSS的曲线标题[重复]

问题描述投票：-3回答：1

1个回答

最新问题

带有纯CSS的曲线标题[重复]

问题描述 投票：-3回答：1

1个回答

最新问题

问题描述投票：-3回答：1