CSS3 Triangle/cut-out Border

Question

Мне интересно, есть ли «простой» способ сделать что-то вроде ниже с помощью CSS3, я хочу избежать использования изображений и абсолютного позиционирования или аналогичных, и предпочел бы использовать некоторый метод CSS для достижения этой цели.

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

Answer 1

Вы можете использовать простой клип-путь в CSS:

clip-path:polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); 

Результат (в Chrome):

ONLINE DEMO

Но знать о том, что поддержка не так уж велика еще для всех браузеров. В настоящее время он делает not work in FF, насколько я могу судить (я считаю, вы можете использовать SVG для FF).

Update

Ok, после того, как играть с SVG (я не эксперт по SVG) я придумал "прототип", который работает в FF:

В HTML:

<!-- For firefox --> 
<svg class="svg-graphic" width="250" height="36" viewBox="0 0 250 36" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1"> 
    <clipPath id="mask"> 
     <polygon points="0, 0, 250, 0, 235, 18, 248, 35, 1, 35, 15, 18" /> 
    </clipPath> 
</svg> 

Затем установите его идентификатор отсечения путь в CSS:

clip-path:url(#mask); 

И он будет производить это в Firefox:

(скрипку обновленный с этим кодом)

Answer 2

Это позволяет вашим Вырез области, чтобы быть прозрачным:

HTML

<div class="left"></div> 
<div class="center"></div> 
<div class="right"></div> 

CSS

.left { 
    width: 0; 
    height: 0; 
    border-top: 60px solid red; 
    border-bottom: 60px solid red; 
    display: inline-block; 
    border-left: 60px solid transparent; 
} 
.center { 
    width: 300px; 
    height: 120px; 
    background-color: red; 
    display: inline-block; 
    margin-left: -4px; 
    margin-right: -4px; 
} 
.right { 
    width: 0; 
    height: 0; 
    border-top: 60px solid red; 
    border-bottom: 60px solid red; 
    display: inline-block; 
    border-right: 60px solid transparent; 
} 

Обновлено скрипку ж/фоновое изображение, чтобы показать диапозитив: http://jsfiddle.net/Eg9jF/1/

Answer 3

Вы можете сделать это с помощью CSS3 градиентов для поддержки в большинстве современных браузеров:

h1 { 
    background: red; 
    display: inline-block; 
    color: white; 
    font-family: sans-serif; 
    padding: .5em 1em; 
    margin: 5em; 
    position: relative; 
} 
h1:before, h1:after { 
    content: ''; 
    width: 2em; 
    height: 100%; 
    position: absolute; 
    top: 0; 
} 
h1:before { 
    left: -2em; 
    background-image: -webkit-linear-gradient(45deg, transparent 50%, #ff0000 50%), -webkit-linear-gradient(-45deg, #ff0000 50%, transparent 50%); 
    background-image: -moz-linear-gradient(45deg, transparent 50%, #ff0000 50%), -moz-linear-gradient(-45deg, #ff0000 50%, transparent 50%); 
    background-image: -o-linear-gradient(45deg, transparent 50%, #ff0000 50%), -o-linear-gradient(-45deg, #ff0000 50%, transparent 50%); 
    background-image: linear-gradient(45deg, transparent 50%, #ff0000 50%), linear-gradient(-45deg, #ff0000 50%, transparent 50%); 
} 
h1:after { 
    right: -2em; 
    background-image: -webkit-linear-gradient(-135deg, transparent 50%, #ff0000 50%), -webkit-linear-gradient(135deg, #ff0000 50%, transparent 50%); 
    background-image: -moz-linear-gradient(-135deg, transparent 50%, #ff0000 50%), -moz-linear-gradient(135deg, #ff0000 50%, transparent 50%); 
    background-image: -o-linear-gradient(-135deg, transparent 50%, #ff0000 50%), -o-linear-gradient(135deg, #ff0000 50%, transparent 50%); 
    background-image: linear-gradient(-135deg, transparent 50%, #ff0000 50%), linear-gradient(135deg, #ff0000 50%, transparent 50%); 
} 

Demo

(Вы можете столкнуться с этим problem, но вы можете прочитать, как его решить.)

Answer 4

Мне нужно было сделать это для каждого из заголовков в моей колонке с тремя колонками, и мне нужно было только вырезать одну сторону. Ни один из этих ответов не работал для меня, поэтому я придумал это.

CSS

#test { 
    height: 66px; 
    width: 90%; 
    background-color: #2a6999; 
    position: relative; 
} 

#test::before { 
    z-index: -1; 
    content: ""; 
    position: absolute; 
    left: 25px; 
    width: 100%; 
    height: 33px; 
    top: 0px; 
    background-color: #2a6999; 
    -webkit-transform: skew(-45deg); 
    -moz-transform: skew(-45deg); 
    -o-transform: skew(-45deg); 
    -ms-transform: skew(-45deg); 
    transform: skew(-45deg); 
    } 

#test::after { 
    z-index: -1; 
    content: ""; 
    position: absolute; 
    left: 25px; 
    width: 100%; 
    height: 33px; 
    top: 33px; 
    background-color: #2a6999; 
    -webkit-transform: skew(45deg); 
    -moz-transform: skew(45deg); 
    -o-transform: skew(45deg); 
    -ms-transform: skew(45deg); 
    transform: skew(45deg); 
} 

Fiddle Demo