отзывчивый треугольник CSS3

0

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

http://jsfiddle.net/KzqB3/2/

CSS

.triangle {
    width: 90%;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;
}
.triangle:after {
    content: "";
    position: absolute;
    top: 66px;
    display: block;
    float: left;
    width: 0;
    height: 0;
    left: 2%;
    border-left: 275px solid transparent;
    border-right: 275px solid transparent;
    border-top: 50px solid #4679BD;
}
.content { width: 90%; background-color: #4679Bd; }
.content p { color: #fff; padding: 15px 0; }

HTML

<div class="content">
    <p>Paragraph inside this div</p>
</div>
<div class="triangle"></div>
  • 0
    должна ли она быть шириной блока blueu? и должна ли она вертикально реагировать на?
  • 0
    да это должно
Показать ещё 4 комментария
Теги:

1 ответ

2

Ссылка Fiddle

CSS

.triangle{
   width: 56%;
   height: 0;
   padding-left: 45%;
   padding-top: 45%;
   overflow: hidden;
}
.triangle div {
   width: 0; 
   height: 0;
   margin-left:-500px;
   margin-top:-500px;
   border-left: 500px solid transparent;
   border-right: 500px solid transparent;
   border-top: 500px solid #4679BD;
}
 .content { width: 90%; background-color: #4679Bd; }
.content p { color: #fff; padding: 15px 0; margin: 0; }

HTML

<div class="content">
   <p>Paragraph inside this div</p>
</div>
<div class="triangle"><div></div></div>
Поделиться
  • 1
    Я бы не назвал это отзывчивым, но это хорошая работа. На более широких экранах треугольник оторвется от своего родителя и выстрелит вниз. Я полагаю, что ОП не хочет, чтобы высота треугольника росла. Последнее изображение svg будет намного лучше, чем этот вариант в практических ситуациях.
  • 0
    У меня было это, прежде чем использовать это в качестве отправной точки jsfiddle.net/jposedvq/3HG6d, однако треугольник не может быть равносторонним, должен быть похож на мою скрипку, где это равнобедренный, не может иметь массивную точку
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню