是否可以将div设置为梯形？

I know it's possible to skew but I don't see a way to skew each corner with a particular degree.

我知道有可能歪斜,但我没有办法在特定程度上扭曲每个角落。

Here's the project I'm working on: http://map.ucf.edu/

这是我正在进行的项目:http://map.ucf.edu/

Looking specifically at the tabs within the menu. Right now I'm using images, I would like to change that for capable browsers.

专门查看菜单中的选项卡。现在我正在使用图像,我想为有能力的浏览器改变它。

I know it's possible to create a CSS trapazoid, but that is using borders without content. The end result also needs a bit of rounded corners.

我知道可以创建一个CSS trapazoid,但这是使用没有内容的边框。最终结果还需要一些圆角。

edit: Starting with Zoltan Toth's solution I was able to achieve this: demo

编辑:从Zoltan Toth的解决方案开始,我能够实现这一目标:演示

div {
    height: 20px;
    padding:2px 5px 0 5px;
    color:white;
    background: rgba(0,0,0,.5);
    margin: 0 10px;
    position: relative;
    border-top-left-radius: 6px 4px;
    border-top-right-radius: 6px 4px;
    font-family:sans-serif;
    font-size:13px;
    line-height:20px;
    vertical-align:bottom;
    display:inline-block;
    white-space:nowrap;
}

div:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 19px solid rgba(0,0,0,.5);
    border-left: 9px solid transparent;
    position: absolute;
    bottom: 0;
    left: -9px;
}

div:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 19px solid rgba(0,0,0,.5);
    border-right: 9px solid transparent;
    position: absolute;
    bottom: 0;
    right: -9px;
}

.b { background:black; margin:0 -7px 0 20px; }
.b:after, .b:before { border-bottom-color:black; }

2 个解决方案

#1

It is possible, here is the rough idea:

这是可能的,这是一个粗略的想法:

div {
    width: 200px;
    height: 100px;
    background: #ddd;
    margin: 20px 150px;
    position: relative
}

div:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid #ddd;
    border-left: 50px solid transparent;
    border-right: 50px solid #ddd;
    position: absolute;
    top: 0;
    left: -99px;
}

div:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid #ddd;
    border-left: 50px solid #ddd;
    border-right: 50px solid transparent;
    position: absolute;
    top: 0;
    right: -99px;
}

<div>Hello</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus ex quis enim posuere auctor.</div>

#2

We can use linear-gradient() to draw trapezoidal shape on rectangular element.

我们可以使用线性渐变()在矩形元素上绘制梯形形状。

This trick uses the idea of dividing whole shape in different parts and then draws each shape on the background independently.

这个技巧使用了将整个形状分成不同部分的想法,然后独立地在背景上绘制每个形状。

div {
  background-image:
   linear-gradient(to bottom right, transparent 50%, silver 50%), /* draws left part */
   linear-gradient(to bottom left, transparent 50%, silver 50%), /* draws right part */
   linear-gradient(to right, silver, silver); /* draws central flat part */

  background-repeat: no-repeat;

  /* Sets the background size of each of three shapes individually */
  background-size: 75px 100%, 75px 100%, calc(100% - 150px) 100%;

  /* Sets the background position of each of three shapes individually */
  background-position: 0 0, 100% 0, 75px 0;
}

body {
  background: linear-gradient(orange, red) no-repeat;
  min-height: 100vh;
  margin: 0;
}

div {
  background-image: linear-gradient(to bottom right, transparent 50%, silver 50%),
    linear-gradient(to bottom left, transparent 50%, silver 50%),
    linear-gradient(to right, silver, silver);

  background-size: 75px 100%, 75px 100%, calc(100% - 150px) 100%;
  background-position: 0 0, 100% 0, 75px 0;
  background-repeat: no-repeat;

  padding: 20px 80px;
  min-height: 80px;
  width: 300px;
  margin: 25px;
}

<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>

<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>

#1