Диагональ CSS3 Цвет фона/

В основном я пытаюсь вырезать фон div под углом. Ниже приведен пример ниже: вы заметите, что раздел навигации отключен, а также изображение заголовка ниже.Диагональ CSS3 Цвет фона/

http://imgur.com/fsT4R9T

Есть ли способ, чтобы создать этот эффект, используя CSS3? Я попытался это:

.site-header { 
    background-color: #0c3063; 
    width: 960px; 
    height: 300px; 
    @include clearfix; 
    position: relative; 
    z-index: 1; 

    &:after { 
     content: ""; 
     width: 100px; 
     position: absolute; 
     top: -162px; 
     right: -150px; 
     width: 300px; 
     height: 300px; 
     background-color: black; 
     transform: rotate(45deg); 
     z-index: 2; 
    } 
}

В приведенном выше примере это перекрывается, но я знаю, как это исправить, в основном просто использовать, прежде, а не после. Однако есть ли лучший способ сделать это?

Мой пример кажется, что я не могу поставить: после того, как содержание, прежде чем его родитель, так это решение не идеально :(любые идеи

EDIT: https://jsfiddle.net/6x3yenge/1/

Благодаря

источник

2015-07-13 Chudz

Не могли бы вы создать [демо] (http://www.jsfiddle.net)? – divy3993

Обновлено основное сообщение. – Chudz

да, так что вы сделали хорошо, в чем проблема –

Хотя делает следующий код не достигают того, что вы хотите для изображения, он, безусловно, выполняет работу в верхнем меню. Использование границ для создания треугольников очень упрощает вещи.

JSfiddle link: https://jsfiddle.net/qvjhptpy/

HTML:

<body> 
    <div class="menu"> 
     <div class="main"></div> 
     <div class="cut"></div> 
    </div> 
</body>

CSS:

body 
{ 
    background: yellow; 
} 

.menu 
{ 
    background: transparent; 
    font-size: 0px; /*In case a gap is coming between .main & .cut nested DIVs (Due to whitespace in HTML code)*/ 
} 

.main 
{ 
    display: inline-block; 
    width: 200px; 
    height: 100px; 
    background: red; 
} 

.cut 
{ 
    display: inline-block; 
    border: 50px solid transparent; 
    border-top: 50px solid red; 
    border-left: 50px solid red; 
}

источник

2015-07-13 18:01:44

ответ

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