CSS поддержания формы/размера диагонали Фоновое изображение Текст

Вы можете увидеть, что я пытаюсь реализовать здесь: http://jsfiddle.net/j1234cl/e8nxrnw4/CSS поддержания формы/размера диагонали Фоновое изображение Текст

HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<link rel='stylesheet' id='twentyfourteen-style-css' href="style.css" type='text/css' media='all' /> 
<title>Background Image</title> 
</head> 

<body> 

<div class="content-section"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
       </div> 

</body> 
</html>

CSS:

@charset "utf-8"; 
/* CSS Document */ 

.content-section { 
    background: url("http://i.imgur.com/vcA64hy.png") no-repeat scroll 0% 0%/98% 100% transparent; 
    padding: 55px 30px 0px; 
    margin: 10px 0px 0px; 
    min-height: 230px; 
}

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

В настоящее время я использую фоновое изображение, но мне интересно, должен ли эффект быть реализован с использованием градиента CSS, однако на изображении не только есть эффект полосы, но и градиент внутри него.

Любые советы о том, как я могу это сделать?

Спасибо!

источник

2015-01-27 jyospace

Это достигается с помощью нескольких градиентов CSS, расположенных друг над другом.

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

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

body { 
 
    background: 
 
    /* white to transparent*/ 
 
    linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%), 
 
    /* thin line from top right */ 
 
    repeating-linear-gradient(-45deg, #ffffff, #fff 2px, #ddd 2px, #ddd 4px); 
 
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p> 
 
<p>velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem</p>

источник

2016-01-15 13:31:22 Stewartside

ответ

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