你如何用 CSS 创建 trapezoid-like div

Question

您好，我正在尝试创建一个 trapezoid-like 形状 div 以允许我输入徽标。我研究过的大多数地方都给了我边框来创建形状，但它不允许我在不创建大边框的情况下在其中放置徽标。 trapezoid-like 形状也将位于 header div 内。

这是我想要完成的：

.logo-container {
  margin-left: 15px;
  margin-bottom: -15px;
  border-bottom-left-radius: 0.625em;
  border-bottom-right-radius: 0.625em;
}

<header>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-2 logo-container">
        <div class="center-align">
          <img class="img-responsive" src="https://placehold.it/350x250" />
        </div>
      </div>
    </div>
  </div>
</header>

Answer 1

我认为从技术上讲，您无法制作非矩形的 div，但 this site 列出了您可能想要绘制的常见形状，以及如何绘制的示例他们。梯形就是其中之一。看起来你实际上在这里玩的是一些功能，比如边框的形状，而不是 div 本身的形状，我希望它（没有测试）意味着任何东西你放在它上面不会注意你正在绘制的形状，只需填充技术上存在的 div。

Answer 2

您可以使用多个 border-radius 值来切断它们。

您可以在嵌套标签（父标签和子标签）中使用不同的边框半径来调整您的最终形状。 example

img {
  overflow: hidden;/* not necessary for img */
  border-radius: 0 0 5% 5% / 0 0 100% 100%;
}

<img class="img-responsive" src="https://placehold.it/350x250" />

您还可以使用圆角边框：

div div {
  display: inline-block;
  vertical-align: top;
  margin: 0 3em;
  overflow: hidden;
  /* not necessary for img */
  border-radius: 0 0 10% 10% / 0 0 100% 100%;
}
img {
  border-radius: 0 0 3em 3em / 6em;
  display: block;
}
body>div {
  margin: 1em;
  background: linear-gradient(to top, gray 2em, #BDDDF4 1em);
}

<div>
  <div>
    <img class="img-responsive" src="http://dummyimage.com/350x220/0072BB/ffffff&text=LOGO+img" />
  </div>
</div>

Answer 3

本演练可能对您有所帮助：http://css-shapes.xyz/shape-with-a-slanted-side

它使用 CSS 变换属性倾斜 - 非常适合创建有角度的 div。 link 显示的第三个示例将帮助您入门。

你如何用 CSS 创建 trapezoid-like div

how do you create a trapezoid-like div with CSS

html

css

css-shapes