Css 3 пользовательских трапеция

enter image description here Css 3 пользовательских трапеция

Привет, мне нужно создать DIV, который будет выглядеть как один на поставленном изображения. Обратите внимание на черные и серые зоны. Я экспериментировал с css 3, но я смог создать только по-разному повернутую трапецию. Можно ли создать это только с помощью css?

EDIT: Что Ive попытался было это

trapezoid { 

    border-bottom: 100px solid red; 
    border-left: 150px solid transparent; 
    border-right: 0px solid transparent; 
    height: 0; 

}

Он производит трапецию, которая хороша, но ее differnetly повернута и я не могу понять, как повернуть его enter image description here

источник

2015-05-01 Ziker

какое усилие вы сделали? можете ли вы предоставить css, который вы попробовали? можете ли вы представить более контрастность изображения? –

@ DanielA.White edits made – Ziker

Посмотрите здесь, только для css: -> https://css-tricks.com/examples/ShapesOfCSS/#trapezoid – Nick

Вы можете использовать «под ред skew псевдоэлемент для этого. Что-то вроде:

div { 
 
    height: 100px; 
 
    background: tomato; 
 
    padding-top: 10px; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
div:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 150%; 
 
    background: gray; 
 
    -webkit-transform-origin: top left; 
 
    -webkit-transform: skewY(2deg); 
 
    -moz-transform-origin: top left; 
 
    -moz-transform: skewY(2deg); 
 
    transform-origin: top left; 
 
    transform: skewY(2deg); 
 
}

<div></div>

Другой подход был бы:

div{ 
 
    height:100px; 
 
    width:90vw; 
 
    margin:0;padding:0; 
 
    padding-top:10px; 
 
    background:gray;position:relative; 
 
    } 
 
div:before{ 
 
    content:""; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    border-left:90vw solid transparent; 
 
    border-top:10px solid red; 
 
    -webkit-transform:translateZ(0); 
 
    transform:translateZ(0); 
 
    }

<div></div>

источник

2015-05-01 11:39:08 jbutler483

Спасибо за ответ, он отлично выглядит. Может быть, только один вопрос - можно ли сделать «пограничную линию» более гладкой? – Ziker

Ну, я имел в виду. теперь вы можете увидеть «лестницы», это не совсем правильно – Ziker

Ну, используя хромированный – Ziker

Вы должны принять фиктивный DIV, чтобы заставить его вести себя как хотите тха т вращать и сделать хвост видимого

#black { 
 
    background-color: black; 
 
    position: absolute; 
 
    -ms-transform: rotate(1deg); 
 
    /* IE 9 */ 
 
    -webkit-transform: rotate(1deg); 
 
    /* Safari */ 
 
    transform: rotate(1deg); 
 
    top: -95px; 
 
} 
 
#grey { 
 
    background-color: grey; 
 
    position: absolute; 
 
    top: 0px; 
 
} 
 
div { 
 
    width: 100%; 
 
    height: 100px 
 
}

<div id="grey"></div> 
 
<div id="black"></div>

источник

2015-05-01 11:45:30 Tushar

@Harry yup, который был опечатан ... исправлено :) – Tushar

Это то, что ваш ожидаемый результат:

.main { 
 
    background: none repeat scroll 0 0 grey; 
 
    height: 80px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 380px; 
 
} 
 
.inner { 
 
    background: none repeat scroll 0 0 red; 
 
    height: 80px; 
 
    left: 400px; 
 
    margin: 0 auto; 
 
    top: 80px; 
 
    width: 150px; 
 
    z-index: 99999; 
 
} 
 
.inner::before { 
 
    border-bottom: 0 solid transparent; 
 
    border-right: 100px solid red; 
 
    border-top: 83px solid transparent; 
 
    bottom: 0; 
 
    content: ""; 
 
    height: 66px; 
 
    left: 15px; 
 
    position: absolute; 
 
    right: 100%; 
 
    top: 0; 
 
    width: 0; 
 
}

<div class="main"> 
 
<div class="inner"></div></div>

Надеется, что это помогает.

источник

2015-05-01 12:12:59 ketan

Css 3 пользовательских трапеция

ответ

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