Проблема с градиентом

Gilman · November 19, 2012

Приветствую камрады. Уже неделю как изучаю css, дошло дело до практики, хочу сверстать шаблон применяя фишки css3. А конкретно сделать файски у блоков. И столкнулся с проблемой Для создание файски применяю следующий код

.
block {

	background: #f3f3f3;
	height: 56px;
	margin: 15px 0 15px 0;
	background: linear-gradient(-225deg, transparent 20px, #f3f3f3 0px);
	background: -ms-linear-gradient(-225deg, transparent 20px, #f3f3f3 0px);
	background: -moz-linear-gradient(-225deg,  transparent 20px, #f3f3f3 0px);
	background: -o-linear-gradient(-225deg,  transparent 20px, #f3f3f3 0px);
	background: -webkit-linear-gradient(-225deg, transparent 20px, #f3f3f3 0px);
}

Как я понял проблема возникает в связи постепенным уменьшением или увиличением параметра width. Т,е градиент распрастраняется на весь блок. Подскажите есть ли вариант исправить это, что бы независимо от размера блока, градиент оставался, таким же.

ils · November 19, 2012

А градиенты тут не причем.

<html>
	<head>
		<title>Page</title>
		<style>
			body {
				background: white;
			}
			.block {
				width: 100px;
				height: 50px;
				position: relative;
				background: lightblue;
			}
			.block:before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				border: solid;
				border-width: 25px 25px 0 0;
				border-color: lightblue white;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>
	<body>
		<div class="block">text</div>
	</body>
</html>

Yazon_Nile · November 20, 2012

И цсс3 не при чем)

Sign In

Проблема с градиентом

Question

Gilman

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

ils

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information