Я хочу создать треугольник треугольника с css. Моя первая мысль заключалась в том, чтобы использовать прозрачные границы с transform: rotate, и это сработало (см. Левый треугольник). Теперь я хочу использовать шаблон градиентного изображения границы в качестве фона для одного и того же треугольника, но я не могу заставить его работать. Я пробовал много вещей, как изменение border-width, используя обертки и overflow:hidden среди прочего, ничего не работало. Здесь я отправляю одну из своих попыток (см. Правую форму), поскольку вы видите, что шаблон занимает все пространство, а не форму треугольника. Есть идеи?Градиентный градиентный рисунок в форме треугольника
#top-left {
position:absolute;
left:78px;
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 80px solid black;
border-bottom: 50px solid transparent;
-webkit-transform: rotate(-20deg);
}
#top-right {
position:absolute;
left:300px;
width: 0;
height: 0;
border-image: repeating-linear-gradient(0deg, pink, pink 1%, purple 1%, purple 8%) 10;
border-image-width: 100px 80px 50px 0px;
border-width: 100px 80px 50px 0px;
border-style: solid;
-webkit-transform: rotate(-20deg);
}<div id="wrapper">
<div id="top-left"></div>
<div id="top-right"></div>
</div>Edit: ответ Андрея Федорова хорошо, но есть проблема, когда фон не сплошной цвет, как это, например:
body{
background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
#wrapper {
position: relative;
}
#top-left {
position:absolute;
left:0px;
\t width: 0;
\t height: 0;
\t border-top: 100px solid #fff;
\t border-right: 80px solid transparent;
\t border-bottom: 50px solid #fff;
-webkit-transform: rotate(-20deg);
}
#top-right {
position:absolute;
z-index: -10;
left:0;
width: 0;
height: 0;
border-image: repeating-linear-gradient(0deg, pink, pink 1%, purple 1%, purple 8%) 10;
border-image-width: 100px 80px 50px 0px;
border-width: 100px 80px 50px 0px;
border-style: solid;
-webkit-transform: rotate(-20deg);
}<div id="wrapper">
<div id="top-left"></div>
<div id="top-right"></div>
</div>
Итак, как это? http://codepen.io/8odoros/pen/kXpqvA?editors = 1100 приятно! –
@ 8odoros Да, это идея, вы также можете использовать элементы и использовать трансформацию: http://codepen.io/gc-nomade/pen/OXEqog –
Я, конечно, держу это, это расчеты-тяжелые, хотя ... не ваша вина, но одна из моих основных целей - изменение шаблонов через пользовательский интерфейс. –