Можно ли сделать div трапециевидным?

Я знаю, что перекос возможен, но я не вижу способа перекосить каждый угол с определенной степенью.

Вот проект, над которым я работаю: http://map.ucf.edu/

Особое внимание уделите вкладкам в меню. Прямо сейчас я использую изображения, я хотел бы изменить это для совместимых браузеров.

Я знаю, что можно создать трапазоид CSS, но это использование границ без содержимого. Конечный результат также требует немного закругленных углов.

изменить: начиная с решения Золтана Тота Мне удалось добиться этого: демонстрация

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

css css-transforms css-shapes
person Doug    schedule 03.01.2012    source источник
comment
Если вы спрашиваете, можете ли вы на самом деле заставить браузер интерпретировать форму элемента div не как прямоугольник, ответ будет отрицательным. Но можно обернуть содержимое так, чтобы оно выглядело так. Можно ли привести наглядный пример эффекта, которого вы пытаетесь достичь? (может быть, грубый набросок какой-то?)   -  person Michael Mior    schedule 04.01.2012
comment
Вы хотите это, но вверх ногами, stackoverflow.com/a/8083801/7613 Изображения намного проще.   -  person Andrew    schedule 04.01.2012
comment
возможный дубликат Как нарисовать трапецию/трапецию с помощью css3?   -  person fiatjaf    schedule 02.08.2013
comment
Другой способ сделать это. stackoverflow.com/questions/ 19611206/   -  person Maxi    schedule 14.03.2014
comment
Если вам нужно, чтобы ваша трапеция была отзывчивой, вот одна идея, которая работает только в том случае, если ширина вашей трапеции пропорциональна ширине окна просмотра codepen.io/anon/pen/EXQXvv   -  person gota    schedule 30.06.2017

Ответы (2)


arrow_upward
14
arrow_downward

Это возможно, вот грубая идея:

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>

person Zoltan Toth    schedule 03.01.2012
comment
Это действительно круто. Единственная оставшаяся проблема это прозрачность. Мне удалось подобраться очень близко, но есть некоторые неудобные стыки. При сжатии вы этого не замечаете, но границы отображаются довольно резко. Я не думаю, что это выглядит так же хорошо, как изображения, но я мог бы использовать его в любом случае. Спасибо! - person Doug; 04.01.2012
comment
@ДжеймсП. Вы рисуете очень толстые границы для элемента шириной 0 и высотой 0, поэтому вы получаете квадрат или прямоугольник (в зависимости от ширины границы), состоящий из 4 треугольников. Затем вы можете раскрасить треугольники (или сделать их прозрачными), чтобы они отображались как часть трапеции - jsbin.com/verubejigo/edit?html,css,output - person Zoltan Toth; 20.12.2016
comment
Очень понятное объяснение. Спасибо :) . Таким образом, это похоже на очень маленький квадрат с очень толстыми границами, и браузер по соглашению рисует диагональ, идущую от углов внешнего квадрата, образованного границей, к внутреннему квадрату, который он окружает. - person James P.; 21.12.2016

arrow_upward
1
arrow_downward

Мы можем использовать linear-gradient() для рисования трапециевидной формы на прямоугольном элемент.

Этот трюк использует идею разделения всей фигуры на разные части, а затем рисует каждую фигуру на фоне независимо.

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>

person Mohammad Usman    schedule 23.12.2016