Треугольный div блок?

Question

[Alibek Kulseitov]

Как сделать у блока нижнюю сторону в треугольной форме?
Нужно учесть что он должен быть прозрачным.
Скрин прикрепил

Answer 1

[Денис Малиночкин]

Лучше придумать не смог: клик на JSBin

Comments

[Alibek Kulseitov]

Подождем еще ответов и сделаем ваш ответ самым лучшим)) пока самый крутой ответ

[Alibek Kulseitov]

блин, сайт у меня адаптивный) при изменений размеров сайта, ваш треугольник летит =( пытался подгонять под разные размеры, не получилось)

[Alibek Kulseitov]

Извиняюсь) я оказывается это сделал чужим кодом. Насчет вашего кода, я никогда не имел дело с sass это оно как я понимаю?)

[Денис Малиночкин]

AlibekKulseitov: Я слегка не понимаю в чем проблема, ибо:

[Денис Малиночкин]

AlibekKulseitov: Это Less. На CSS будет так:

body {
  background-color: #c3deef;
  background-size: cover;
}

.triangle {
  color: #000;
  text-align: center;
  overflow: hidden;
  position: relative;
  padding-bottom: 50px;
}

.triangle > .text {
  display: block;
  padding: 10px;
  background-color: #73a0be;
}

.triangle:after {
  position: absolute;
  left: 0;
  content: "";
  width: 100%;
  height: 35px;
  background-image: linear-gradient(to top right, transparent 48%, #c3deef 2%, #73a0be 50%),
                    linear-gradient(to top left, transparent 48%, #c3deef 2%, #73a0be 50%);
  background-position: top left, top right;
  background-repeat: no-repeat;
  background-size: 50.1% 100%;
}

Answer 2

[stayHARD]

Вот примеры:
jsfiddle.net/webtiki/x9cxz423/199
codeitdown.com/css-triangles-responsive
jsfiddle.net/josedvq/xEGM4
www.planningforaliens.com/blog/2013/05/05/flexible...
codepen.io/erikrahm/pen/LqAFk

Comments

[Alibek Kulseitov]

все эти примеры я смотрел ранее) не подходит не один. Пишу еще раз) Нужен такой метод чтобы блок с треугольник мог расстягиваться 100% на ширину body. все те примеры статичные то есть ширина в пикселях

[stayHARD]

https://jsfiddle.net/3vkzpur9/

[Alibek Kulseitov]

stayHARD: эмм что-то не разобрался)) там не треугольник =)

[stayHARD]

AlibekKulseitov: и что?
Все что Вы хотели там есть. Перерисовать фигуру не сложно.

Answer 3

[Aleksandr]

apps.eky.hk/css-triangle-generator

Comments

[Alibek Kulseitov]

не пойдет такой сервис) уже пробовал. Нужно чтобы треугольник расстягивался на 100% ширину и центрировался

Answer 4

[artem_music]

Можно попробовать через SVG изображения

Comments

[Alibek Kulseitov]

SVG разве не загружают страницу? ну то есть css в этом случае будет больше грузить страницу или svg?

[artem_music]

AlibekKulseitov: преждевременная оптимизация