你如何用CSS创建一个类似梯形的div

Question

您好我正在尝试创建一个类似梯形的形状div，它允许我输入徽标。我研究过的大多数地方给了我边框来创建形状，但它不允许我在其中放置徽标而不创建大边框。类似梯形的形状也将位于标题div内。

这是我想要完成的事情：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用多个border-radius值将其剪掉。

你可以在imbricated标签（父母，然后是孩子）中使用不同的border-radius来调整你的最终形状。 example

＆＃13;

＆＃13;

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

＆＃13;

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);
}

＆＃13;

＆＃13;

＆＃13;

你也可以勾勒出圆形边框：

＆＃13;

＆＃13;

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

＆＃13;

reg DATA_REG [76:0]

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

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

Answer 3

我认为你不能在技术上制作一个非矩形的div，但是this site有一个你可能想要绘制的常见形状列表，以及如何绘制它们的示例。梯形就是其中之一。看起来你实际上在玩这里的东西是很多功能，比如边框的形状，而不是div本身的形状，（我没想测试）我会期望你放在顶部的任何东西它不会关注你正在绘制的形状，只需填写技术上存在的div。