Создайте форму «трапеции» с обрезанным переполнением

Im интересно, если кто-нибудь знает, если вообще возможно, как создать трапецию с помощью CSS/Html/Canvas.Создайте форму «трапеции» с обрезанным переполнением

Я пробовал сортировать хеш-образ вместе только очень грязно и был бы непригодным в реальном мире.

div { 
width:0; 
margin-left:-1000px; 
height:100px; 
border-right:1000px solid lightblue; 
border-top:60px solid transparent; 
border-bottom:60px solid transparent; 
padding-left:1000px; 
white-space:no-wrap; 
}

Heres мой jsFiddle ...

http://jsfiddle.net/Liamatvenn/WWYYM/

источник

2013-11-26 Liam

Почему то, что вы сделали непригодным для использования? Что именно вы пытаетесь достичь? Ваша скрипка, кажется, делает то, что вы ищете. – sn3ll

@ sn3ll: То, что требуется OP, - это текстовое содержимое, которое «зажимает» (скрывается), когда течет вне формы трапеции. – ScottS

Это непригодно, потому что размеры должны быть статическими, и они утомительны для изменения (а не просто ширина + высота здесь). – tybro0103

я не знаю, что вы хотите. так что я думаю, это поможет вам немного.

div { 
    width:0; 
    margin-left:-100px; 
    height:100px; 
    border-right:100px solid lightblue; 
    border-top:60px solid transparent; 
    border-bottom:60px solid transparent; 
    padding-left:100px; 
    white-space:no-wrap; 
}

источник

2013-11-26 17:39:31 singhiskng

По умолчанию 'div' является' display: block', поэтому ничего не делает. – ScottS

да, вы правы, извините. – singhiskng

Вы говорите что-то вроде этого, пожалуйста? Проверьте эту скрипту: jsfiddle.net/WWYYM/3/. Дайте мне знать, если это сработает для вас. Я редактировал свой код так:

div { 
    border-bottom: 100px solid lightblue; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    height: 0; 
    width: 500px; 
    white-space:no-wrap; 
    text-align:center; 
}

источник

2013-11-26 17:42:38

вы можете прибавление преобразование, так ниже:

 

div { 
width:0; 
margin-left:-50px; 
margin-top: -500px; 
height:100px; 
border-right:100px solid lightblue; 
border-top:60px solid transparent; 
border-bottom:60px solid transparent; 
padding-left:1000px; 
white-space:no-wrap; 

transform:rotate(20deg); 
-ms-transform:rotate(20deg); /* IE 9 */ 
-webkit-transform:rotate(90deg); 
 

}

источник

2013-11-26 20:15:59

я могу сделать это с 2-й дополнительными дивами как обертки.

CSS

.trapezium { 
    position: absolute; 
    left: 40px; 
    top: 40px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(6deg); 
    overflow: hidden; 
} 

.trapezium > div { 
    background-color: yellow; 
    position: absolute; 
    left: 0px; 
    top: 50px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(-12deg); 
    overflow: hidden; 
} 

.trapezium > div > div { 
    font-size: 60px; 
    background-color: yellow; 
    position: absolute; 
    left: 0px; 
    top: -30px; 
    width: 300px; 
    height: 200px; 
    -webkit-transform: skewY(6deg); 
    overflow: hidden; 
}

demo

источник

2013-11-26 21:09:30 vals

Спасибо @Vals, я думаю, что это так близко, как я получу, возможно, придется использовать некоторые .png, так как он также станет жидким сайтом - просто хотел задать вопрос, возможно ли это, оцените ваш вклад. – Liam

Создайте форму «трапеции» с обрезанным переполнением

ответ

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