如何用CSS创建梯形div

Hello I am trying to create a trapezoid-like shape div that will allow me to input a logo. Most places I have researched gave me borders to create the shape but it wont allow me to put a logo in it without creating big borders. The trapezoid-like shape will also be located inside the header div.

你好，我正在创建一个梯形形状的div，它允许我输入一个标志。我研究过的大多数地方都给了我创建形状的边框，但它不允许我在没有创建大边框的情况下添加标识。梯形形状也将位于header div中。

Here is what I am trying to accomplish:

下面是我想要达到的目标:

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

3 个解决方案

#1

You may use multiple border-radius values to cut them off.

您可以使用多个边界半径值来切断它们。

you may use different border-radius within imbricated tags (parent then childs) to tune your final shape. example

您可以使用不同的边界半径内的叠瓦标签(父然后childs)调整您的最终形状。例子

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

you may also inbricate rounded borders :

你也可以镶嵌圆形边框:

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>

#2

This walkthrough may help you: http://css-shapes.xyz/shape-with-a-slanted-side

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

It uses the CSS transform property Skew - great for creating angled divs. The third example that link shows will get you started.

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

#3

I don't think you can technically make a div that isn't rectangular, but this site has a list of common shapes you might want to draw, and samples of how to draw them. Trapezoid is one of them. It looks like what you're actually playing with here is a number of features like the shape of the border, though, rather than the shape of the div itself, which (without testing) I would expect would mean that anything you put on top of it will pay no attention to the shape you're drawing and simply fill the div as it technically exists.

我不认为你可以从技术上制作一个非矩形的div，但是这个网站有一个你可能想要绘制的常见形状列表，以及如何绘制它们的示例。梯形就是其中之一。看起来这里你可以玩许多特性,如形状的边界,然而,而不是div本身的形状,(没有测试)我希望意味着什么你放在上面会不注意你画的形状和简单的填补div技术上存在。

#1