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

Question

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

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

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

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

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

Спасибо заранее

Answer 1

Вы можете использовать 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>