Как сделать трапецию с бордюром

Я попытался построить трапецию с текстовым содержимым и границей (белая линия шириной 1 пиксель).

Я нашел примеры с чем-то вроде этого:

height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;

Это пример png, если я использую его в качестве фона с прозрачным цветом, это сработает, но это своего рода хак и не так красиво...

пример

«клип-путь», похоже, недостаточно поддерживается, так что есть ли другие способы? возможно ли использование SVG?

Заранее спасибо


svg css tabs clip-path shape
person Rory    schedule 01.02.2017    source источник
comment
конечно, вы могли бы сделать это в SVG.   -  person Robert Longson    schedule 01.02.2017
comment
Связано с (или возможным дубликатом) stackoverflow .com/questions/15724678/   -  person Harry    schedule 01.02.2017

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете использовать pseudo-element и использовать perspective для родителя, чтобы создать эту фигуру в качестве фона.

body {
  background: lightblue;
}
div {
  width: 150px;
  height: 40px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  -webkit-perspective: 130px;
  perspective: 130px;
  margin: 50px;
}
div:after {
  position: absolute;
  width: 100%;
  height: 100%;
  background: lightgreen;
  border: 1px solid white;
  content: '';
  left: 0;
  top: 0;
  z-index: -1;
  -webkit-transform: rotateX(20deg) rotateY(0deg);
  transform: rotateX(20deg) rotateY(0deg);
}
<div>Some text</div>

person Nenad Vracar    schedule 01.02.2017
comment
Спасибо, это кажется лучшим решением для меня - person Rory; 07.02.2017
comment
Это гораздо более универсальный метод, чем метод прозрачного контура. - person Alexander D'Attore; 27.02.2021