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

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

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

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

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

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

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

источник

2017-02-01 Rory

уверен, вы могли бы сделать это в SVG. –

Связано с (или возможным дублированием) http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643 – Harry

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

источник

2017-02-01 09:33:49

Спасибо, это похоже на лучшее решение для меня – Rory

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

ответ

Смежные вопросы