HTML – 如何在CSS中制作滑雪板(或挤压矩形)形状的div？

概述我试图得到这个形状： 到目前为止我有this.有没有办法使用CSS获得此效果？我认为负半径可能会起作用. div { display: inline-block; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; min-width: 200px; border-radius:1 我试图得到这个形状：

到目前为止我有this.有没有办法使用CSS获得此效果？我认为负半径可能会起作用.

div {    display: inline-block;    padding-top: 10px;    padding-bottom: 10px;    padding-left: 10px;    min-wIDth: 200px;    border-radius:10% / 70%;    background-color: red;}

<div>    Board</div>

解决方法 我喜欢这样的东西,因为我总是乱搞这样的东西.所以我会这样做.使用：before和：在我们可以创建这个形状之后,我们使用它们创建一个坐在div顶部的形状,颜色与背景相同.这将使它看起来像你想要的形状.

制作：之前和之后：大小之后得到你想要的尺寸(改变宽度和高度).

div {  display: inline-block;  padding-top: 10px;  padding-bottom: 10px;  padding-left: 10px;  min-wIDth: 200px;  border-radius: 20px;  background-color: red;  position: relative;}div:before,div:after {  content: "";  display: block;  wIDth: 96%;  height: 20px;  border-radius: 50%;  background: #fff;  position: absolute;  margin: auto;}div:before {  top: -17px;  left: 0;  right: 0;}div:after {  bottom: -17px;  left: 0;  right: 0;}

<div>Board</div>

总结

以上是内存溢出为你收集整理的HTML – 如何在CSS中制作滑雪板(或挤压矩形)形状的div？全部内容，希望文章能够帮你解决HTML – 如何在CSS中制作滑雪板(或挤压矩形)形状的div？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。