Можно ли создать обрезанный div?

Можно ли создать разделенный / наклонный заголовок div, как на изображении ниже?

Это для мобильного сайта

введите описание изображения здесь


html css divider css-shapes
person JVS    schedule 29.01.2015    source источник
comment
Люди делают это, используя псевдоэлементы :after и :before. В последнее время это также возможно с помощью css3-transform. css-tricks.com/examples/ShapesOfCSS   -  person sarveshseri    schedule 29.01.2015
comment
Спасибо, это может помочь   -  person JVS    schedule 29.01.2015
comment
@JVS: Хотя это может оказаться интересным вопросом, не могли бы вы дать некоторую разметку относительно любых попыток на данный момент? Таким образом, будет меньше шансов быть отвергнутым и / или закрытым   -  person jbutler483    schedule 29.01.2015
comment
На самом деле я просто занимаюсь дизайном этого веб-сайта. Мне нужно было убедить разработчика, что есть способ сделать это с помощью кода, иначе весь дизайн не прошел бы. Поэтому у меня нет попыток кода.   -  person JVS    schedule 29.01.2015

Ответы (1)


arrow_upward
3
arrow_downward

Да, это возможно: ДЕМО

   .wrapper {
overflow:hidden;
height:300px;
width:100%;
background: url(http://placekitten.com/g/300/300);
position:relative;
}
.top {
background:gray;
height:60%;
width:130%;
position:absolute;
top:-30%;
left:-5%;
transform:rotate(5deg);
border-bottom:10px solid white;
}
.text{
position:absolute;
top:20px;
right:10%;
padding:10px;
border-radius:10px;
border:5px solid white;
transition:all 0.8s;
}
.text:hover{
box-shadow:0 0 10px white;
}
<div class="wrapper">
    <div class="top"></div>
    <div class="text">MENU</div>
</div>

person jbutler483    schedule 29.01.2015