Я хочу, чтобы html div был как ракета, я имею в виду, что он должен быть представлен как продолговатый с краем треугольника. Так же, как этот снимок экрана: -
Я хочу, чтобы html div был как ракета, я имею в виду, что он должен быть представлен как продолговатый с краем треугольника. Так же, как этот снимок экрана: -
Здесь учебник, в котором объясняется, как создать несколько вариантов навигации на основе сумок в чистом CSS3.
Окончательный результат выглядит следующим образом:
Здесь рабочая демонстрация.
Чистое решение CSS могло бы использовать: после псевдоселектора и злоупотребления границами для создания треугольников. Этот сайт даже сгенерирует код для вас:
Установите положение вправо и размер будет высотой div.
На самом деле вы можете делать треугольники с чистым CSS: http://css-tricks.com/snippets/css/css-triangle/
Вот что вы можете сделать, используя css, для взлома стрелки.
.arrow_box {
position: relative;
background: #2ad517;
border: 4px solid #12f50a;
top: 100px;
width: 240px;
height: 180px
}
.arrow_box:after, .arrow_box:before {
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(42, 213, 23, 0);
border-left-color: #2ad517;
border-width: 90px;
top: 50%;
margin-top: -90px;
}
.arrow_box:before {
border-color: rgba(18, 245, 10, 0);
border-left-color: #12f50a;
border-width: 96px;
top: 50%;
margin-top: -96px;
}
что-то для вас, чтобы начать с
Надеюсь, что это поможет: http://jsfiddle.net/A2KzR/
HTML:
<div id="global">
<div id="normal" >Content</div>
<div id="triangle-right" />
</div>
CSS
#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
left: 50px;
position: relative;
}
#normal {
width: 50px;
height: 100px;
background-color: red;
float:left;
}
#global {
width: 800px;
}
Дополнительная информация http://css-tricks.com/examples/ShapesOfCSS/