треугольники в треугольнике CSS

Я пытаюсь создать веб-страницу с навигацией в фиксированном треугольнике.треугольники в треугольнике CSS

Проблема в том, что я не могу поместить меньшие треугольники внутри большого, как показано на фотографии ниже.

треугольник меняет угол при изменении размеров окна, поэтому я не могу установить его в качестве изображения.

Я застрял после создания большого треугольника, вот CSS и HTML:

.triangle { 
 
\t position:fixed; 
 
\t top:0; 
 
\t left:0; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    padding-bottom: 10%; 
 
    overflow: hidden; 
 
\t z-index:5; 
 
} 
 
.triangle:after { 
 
\t content: ""; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    border-right: 300px solid transparent; 
 
    border-bottom: 100vh solid grey; 
 
}

<div class="triangle"></div>

Как я могу реализовать этот проект?

источник

2015-11-12 Darius F

Возможно, это может вам помочь: http://qrohlf.com/trianglify/ –

Вы можете использовать прозрачный png, накладывающий ваш '.triangle', и использовать' pointer-events: none; ' – Brewal

trianglify выглядит хорошо, но мне нужно не квадратная фигура в результате, но спасибо, я проверю, может быть, ей нужны функции. –

Спасибо за Qwertiy!

Я забыл, что могу сделать все это с помощью svg.

Результат:

#triangle{ 
 
\t height:100vh; 
 
\t position:fixed; 
 
\t top:0; 
 
\t left:0; 
 
} 
 
#triangle svg{ 
 
\t height:100%; 
 
}

\t <div id="triangle"> 
 
\t <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" style="image-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" 
 
viewBox="0 0 8296 10958" 
 
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMid meet"> 
 
<defs> 
 
    <style type="text/css"> 
 
    <![CDATA[ 
 
    .fil0 {fill:#3C3A3B} 
 
    .fil1 {fill:#2BB67E} 
 
    .fil7 {fill:#252525} 
 
    .fil2 {fill:#1B9567} 
 
    .fil8 {fill:#1B9567} 
 
    .fil4 {fill:#236B4D} 
 
    .fil3 {fill:#147852} 
 
    .fil9 {fill:#147852} 
 
    .fil5 {fill:#0F6948} 
 
    .fil6 {fill:#0F6948} 
 
    ]]> 
 
    </style> 
 
    <mask id="id0"> 
 
    <linearGradient id="id1" gradientUnits="userSpaceOnUse" x1="1546.09" y1="2400.5" x2="2245.49" y2="3327.41"> 
 
    <stop offset="0" style="stop-opacity:1; stop-color:white"/> 
 
    <stop offset="0.658824" style="stop-opacity:0.501961; stop-color:white"/> 
 
    <stop offset="1" style="stop-opacity:0; stop-color:white"/> 
 
    </linearGradient> 
 
    <rect style="fill:url(#id1)" x="1371" y="2533" width="1050" height="662"/> 
 
    </mask> 
 
    <mask id="id2"> 
 
    <linearGradient id="id3" gradientUnits="userSpaceOnUse" x1="824.138" y1="2789.31" x2="546.587" y2="3652.24"> 
 
    <stop offset="0" style="stop-opacity:1; stop-color:white"/> 
 
    <stop offset="0.678431" style="stop-opacity:0.501961; stop-color:white"/> 
 
    <stop offset="1" style="stop-opacity:0; stop-color:white"/> 
 
    </linearGradient> 
 
    <rect style="fill:url(#id3)" y="2761" width="1371" height="920"/> 
 
    </mask> 
 
    <mask id="id4"> 
 
    <linearGradient id="id5" gradientUnits="userSpaceOnUse" x1="1208.94" y1="3086.85" x2="1275.56" y2="3573.33"> 
 
    <stop offset="0" style="stop-opacity:1; stop-color:white"/> 
 
    <stop offset="0.788235" style="stop-opacity:0.501961; stop-color:white"/> 
 
    <stop offset="1" style="stop-opacity:0; stop-color:white"/> 
 
    </linearGradient> 
 
    <rect style="fill:url(#id5)" y="2848" width="2485" height="964"/> 
 
    </mask> 
 
    <mask id="id6"> 
 
    <linearGradient id="id7" gradientUnits="userSpaceOnUse" x1="7048.03" y1="9572.37" x2="6622.58" y2="8467.99"> 
 
    <stop offset="0" style="stop-opacity:1; stop-color:white"/> 
 
    <stop offset="0.788235" style="stop-opacity:0.501961; stop-color:white"/> 
 
    <stop offset="1" style="stop-opacity:0; stop-color:white"/> 
 
    </linearGradient> 
 
    <rect style="fill:url(#id7)" x="6256" y="8252" width="1158" height="1536"/> 
 
    </mask> 
 
    <mask id="id8"> 
 
    <linearGradient id="id9" gradientUnits="userSpaceOnUse" x1="5660.97" y1="9414.52" x2="5171.17" y2="9015.96"> 
 
    <stop offset="0" style="stop-opacity:1; stop-color:white"/> 
 
    <stop offset="0.6" style="stop-opacity:0.501961; stop-color:white"/> 
 
    <stop offset="1" style="stop-opacity:0; stop-color:white"/> 
 
    </linearGradient> 
 
    <rect style="fill:url(#id9)" x="4503" y="8252" width="1825" height="1926"/> 
 
    </mask> 
 
    <mask id="id10"> 
 
    <linearGradient id="id11" gradientUnits="userSpaceOnUse" x1="2214.44" y1="10409" x2="1277.21" y2="10775.8"> 
 
    <stop offset="0" style="stop-opacity:1; stop-color:white"/> 
 
    <stop offset="0.788235" style="stop-opacity:0.501961; stop-color:white"/> 
 
    <stop offset="1" style="stop-opacity:0; stop-color:white"/> 
 
    </linearGradient> 
 
    <rect style="fill:url(#id11)" x="1070" y="10226" width="1351" height="732"/> 
 
    </mask> 
 
    <mask id="id12"> 
 
    <linearGradient id="id13" gradientUnits="userSpaceOnUse" x1="3426.59" y1="10530.6" x2="3446.52" y2="10158.6"> 
 
    <stop offset="0" style="stop-opacity:1; stop-color:white"/> 
 
    <stop offset="0.6" style="stop-opacity:0.501961; stop-color:white"/> 
 
    <stop offset="1" style="stop-opacity:0; stop-color:white"/> 
 
    </linearGradient> 
 
    <rect style="fill:url(#id13)" x="2369" y="10101" width="2134" height="488"/> 
 
    </mask> 
 
</defs> 
 
<g id="Layer_x0020_1"> 
 
    <metadata id="CorelCorpID_0Corel-Layer"/> 
 
    <polygon class="fil0" points="8296,10958 6994,9231 0,0 0,10958 3325,10958 4148,10958 "/> 
 
    <polygon class="fil1" points="997,1316 0,0 490,1618 "/> 
 
    <polygon class="fil2" points="492,1618 1919,2533 997,1316 "/> 
 
    <polygon class="fil3" points="0,2761 490,1618 0,1893 "/> 
 
    <polygon class="fil4" points="0,2761 490,1618 1919,2533 "/> 
 
    <polygon class="fil5" points="0,1899 0,0 490,1618 "/> 
 
    <polygon class="fil1" points="1371,2848 1919,2533 0,2761 "/> 
 
    <polygon class="fil1" style="mask:url(#id0)" points="1371,2848 1919,2533 2421,3195 "/> 
 
    <polygon class="fil6" style="mask:url(#id2)" points="0,3680 0,2761 1371,2848 "/> 
 
    <polygon class="fil1" points="5759,10366 7414,10568 7414,9788 "/> 
 
    <polygon class="fil7" style="mask:url(#id4)" points="1482,3580 2484,3279 2421,3195 1371,2848 0,3680 0,3812 "/> 
 
    <polygon class="fil4" points="6329,9607 5759,10366 7414,9788 "/> 
 
    <polygon class="fil8" style="mask:url(#id6)" points="6329,9607 7414,9788 6257,8252 "/> 
 
    <polygon class="fil8" points="8296,10958 7414,10568 7414,9788 "/> 
 
    <polygon class="fil4" points="8296,10958 7414,10568 6415,10958 "/> 
 
    <polygon class="fil9" points="5759,10366 7414,10568 6415,10958 "/> 
 
    <polygon class="fil1" points="5759,10366 6415,10958 4504,10178 "/> 
 
    <polygon class="fil8" points="3945,10588 6415,10958 4504,10178 "/> 
 
    <polygon class="fil9" points="5759,10366 6329,9607 4504,10178 "/> 
 
    <polygon class="fil7" style="mask:url(#id8)" points="6257,8252 6258,8286 6329,9607 4504,10178 5842,9236 "/> 
 
    <polygon class="fil4" points="3945,10588 6415,10958 3945,10958 "/> 
 
    <polygon class="fil1" points="2370,10226 3945,10588 2421,10958 "/> 
 
    <polygon class="fil8" style="mask:url(#id10)" points="2370,10226 1070,10958 2421,10958 "/> 
 
    <polygon class="fil7" style="mask:url(#id12)" points="4504,10178 3945,10588 2370,10226 3835,10101 "/> 
 
    <polygon class="fil8" points="3945,10588 2421,10958 3945,10958 "/> 
 
</g> 
 
</svg> 
 
</div>

И она полностью реагирует на любой размер экрана.

источник

2015-11-12 12:33:26

треугольники в треугольнике CSS

ответ

Смежные вопросы