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

前端之家收集整理的这篇文章主要介绍了HTML – 如何在CSS中制作滑雪板(或挤压矩形)形状的div?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图得到这个形状:

到目前为止我有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>
@H_502_8@

解决方法

我喜欢这样的东西,因为我总是乱搞这样的东西.所以我会这样做.使用: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>
@H_502_8@ @H_502_8@

猜你在找的HTML相关文章