Изображение в блоке неправильной формы

@iWertex · Регистрация: 08.03.2015

Author24 — интернет-сервис помощи студентам

Добрый день!
Скажите, пожалуйста, каким образом вставить фоновую картинку в блок, таким образом чтобы она приняла его форму?
Ссылка на изображение

Кликните здесь для просмотра всего текста

http://wallpapers1.ru/priroda/... 29_129.jpg

HTML5

1	<div class="block"></div>

CSS

.block {
    width: 0;
    height: 0;
    border-bottom: 100px solid red; 
    border-left: 100px solid transparent;
}
}

Заранее благодарен.

@Kraken73 · 18.03.2016, 15:28

Вообще картинка сразу вставляется по форме блока, по вашему коду вот что получилось
https://jsfiddle.net/8984n8bw/

HTML5

1	<div class="block"></div>

CSS

.block {
    width: 0;
    height: 0;
    border-bottom: 100px solid red; 
    border-left: 100px solid transparent;
    background-image:url('http://wallpapers1.ru/priroda/data/priroda129_129.jpg');
 
}

@iWertex · 18.03.2016, 15:31 **[ТС]**

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

@alc0 · 18.03.2016, 16:14

Вы создаете блок с помощью css..и этот в блоку нет внутри ничего, так как высота 0 и ширина 0...а у блока всего лишь создаются бордеры , тем самым вы получаете фигуру треугольник...посмотрите в чем разница...
https://jsfiddle.net/8984n8bw/1/
могу посоветовать использовать маскировку в блоке, и маску в форме треугольника...или clip...почитайте про это..
http://htmlbook.ru/css/clip
http://htmlbook.ru/blog/maskirovanie-v-css

@Shakalaka · 18.03.2016, 16:40

HTML5

<svg viewbox="0 0 100 100">
  <defs>
    <pattern id="img1" patternUnits="objectBoundingBox" width="1" height="1">
      <image xlink:href="http://wallpapers1.ru/priroda/data/priroda129_129.jpg" x="0" y="0" width="300" height="200" />
    </pattern>
  </defs>
  <path d="M 100,100 L 0,100 L 100,0 z" fill="url(#img1)" />
  
</svg>

CSS

svg{
  display:block;
  width:100px;
}

https://jsfiddle.net/shakalaka/debw5fpp/

@alc0 · 18.03.2016, 16:45

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

@iWertex 0 / 0 / 1 Регистрация: 08.03.2015 Сообщений: 27
	18.03.2016, 15:31 [ТС]	3
	Kraken73, спасибо за ответ, я имел в виду красный блок - треугольник, картинка должна быть только в нем. 0

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	18.03.2016, 16:14	4
	Вы создаете блок с помощью css..и этот в блоку нет внутри ничего, так как высота 0 и ширина 0...а у блока всего лишь создаются бордеры , тем самым вы получаете фигуру треугольник...посмотрите в чем разница... https://jsfiddle.net/8984n8bw/1/ могу посоветовать использовать маскировку в блоке, и маску в форме треугольника...или clip...почитайте про это.. http://htmlbook.ru/css/clip http://htmlbook.ru/blog/maskirovanie-v-css 1

@alc0 18 / 18 / 13 Регистрация: 15.03.2016 Сообщений: 107
	18.03.2016, 16:45	6
	блин, а я все забываю про svg ...когда же я его выучу нормально))) 0